Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
Usage and demo of the Font Awesome 6.x Theme. You need to set the plugin theme property to fa6. This theme uses the icons from Font Awesome 6.x library. To ensure this theme works, you must pre-load the Font Awesome 6.x library assets/CSS.
fileinput.css and fileinput.js respectively. You must load the Font Awesome 6.x CSS for the theme to render the right icons. NOTE: The theme is responsive and will automatically style itself differently for mobile devices (you can test this by resizing your browser to less than 500px width). <!-- FONT AWESOME 6.X THEME (BASIC) -->
<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/fa6/theme.js"></script>
<div class="file-loading">
<input id="inp-theme-fa6-1" name="inp-theme-fa6-1" type="file" multiple accept="image">
</div>
<script>
$("#inp-theme-fa6-1").fileinput({
theme: "fa6",
uploadUrl: "/file-upload-batch/2",
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
initialPreviewAsData: true,
maxFileSize: 10000,
removeFromPreviewOnError: true,
initialPreview: [
"https://picsum.photos/id/101/1920/1080",
"https://picsum.photos/id/102/1920/1080",
"https://picsum.photos/id/103/1920/1080"
],
initialPreviewConfig: [
{caption: "picture-1.jpg", description: "<h5>Picture One</h5> This is a representative placeholder description for the first image.", size: 329892, width: "120px", url: "/site/file-delete", key: 101},
{caption: "picture-2.jpg", description: "<h5>Picture Two</h5> This is a representative placeholder description for the second image.", size: 872378, width: "120px", url: "/site/file-delete", key: 102},
{caption: "picture-3.jpg", description: "<h5>Picture Three</h5> This is a representative placeholder description for the third image.", size: 632762, width: "120px", url: "/site/file-delete", key: 103}
],
initialPreviewDownloadUrl: 'https://picsum.photos/id/{key}/1920/1080' // the key will be dynamically replaced
});
</script>
<!-- FONT AWESOME 6.X THEME (ADVANCED) -->
<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<div class="file-loading">
<input id="inp-theme-fa6-2" name="inp-theme-fa6-2[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#inp-theme-fa6-2").fileinput({
theme: "fa6",
uploadUrl: "/file-upload-batch/2",
minFileCount: 2,
maxFileCount: 5,
maxFileSize: 10000,
removeFromPreviewOnError: true,
overwriteInitial: false,
previewFileIcon: '<i class="fas fa-file"></i>',
initialPreview: [
// IMAGE DATA
'https://picsum.photos/id/1071/1920/1080',
// IMAGE RAW MARKUP
'<img src="https://picsum.photos/id/1075/1920/1080" class="kv-preview-data file-preview-image">',
// TEXT DATA
'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
// PDF DATA
'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
// VIDEO DATA
"https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
],
initialPreviewAsData: true, // defaults markup
initialPreviewConfig: [
{caption: "Image 11.jpg", description: "<h5>File One</h5> This is an image file.", size: 762980, url: "/site/file-delete", downloadUrl: 'https://picsum.photos/id/1071/1920/1080', key: 1071},
{previewAsData: false, description: "<h5>File Two</h5> This is also an image file.", size: 823782, caption: "Image 13.jpg", url: "/site/file-delete", downloadUrl: 'https://picsum.photos/id/1075/1920/1080', key: 1075},
{caption: "Lorem Ipsum.txt", type: "text", description: "<h5>File Three</h5> This is a text file.", size: 1430, url: "/site/file-delete", key: 12},
{type: "pdf", description: "<h5>File Four</h5> This is a PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14},
{type: "video", description: "<h5>File Five</h5> This is a Video file.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15}
],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature"
},
preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
previewFileIconSettings: { // configure your icon file extensions
'doc': '<i class="fa-solid fa-file-word text-primary"></i>',
'xls': '<i class="fa-solid fa-file-excel text-success"></i>',
'ppt': '<i class="fa-solid fa-file-powerpoint text-danger"></i>',
'pdf': '<i class="fa-solid fa-file-pdf text-danger"></i>',
'zip': '<i class="fa-solid fa-file-archive text-muted"></i>',
'htm': '<i class="fa-solid fa-file-code text-info"></i>',
'txt': '<i class="fa-solid fa-file-alt text-info"></i>',
'mov': '<i class="fa-solid fa-file-video text-warning"></i>',
'mp3': '<i class="fa-solid fa-file-audio text-warning"></i>',
// note for these file types below no extension determination logic
// has been configured (the keys itself will be used as extensions)
'jpg': '<i class="fa-solid fa-file-image text-danger"></i>',
'gif': '<i class="fa-solid fa-file-image text-muted"></i>',
'png': '<i class="fa-solid fa-file-image text-primary"></i>'
},
previewFileExtSettings: { // configure the logic for determining icon file extensions
'doc': function(ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function(ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function(ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function(ext) {
return ext.match(/(htm|html)$/i);
},
'txt': function(ext) {
return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
},
'mov': function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function(ext) {
return ext.match(/(mp3|wav)$/i);
}
}
});
</script>
<!-- FONT AWESOME 6.X THEME (ADVANCED) -->
<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
<link href="/path/to/themes/explorer/theme.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/explorer/theme.js"></script>
<div class="file-loading">
<input id="input-ke-3" name="input-ke-3[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#input-ke-3").fileinput({
hideThumbnailContent: true, // hide image, pdf, text or other content in the thumbnail preview
theme: "fa6",
uploadUrl: "/file-upload-batch/2",
minFileCount: 2,
maxFileCount: 5,
overwriteInitial: false,
initialPreview: [
// IMAGE DATA
'https://picsum.photos/id/718/1920/1080',
// IMAGE RAW MARKUP
'<img src="https://picsum.photos/id/719/1920/1080" class="kv-preview-data file-preview-image">',
// TEXT DATA
'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
// PDF DATA
'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
// VIDEO DATA
"https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
],
initialPreviewAsData: true, // defaults markup
initialPreviewConfig: [
{caption: "Business 1.jpg", description: "<h5>File One</h5> This is an image file.", size: 762980, url: "/site/file-delete", key: 11},
{previewAsData: false, description: "<h5>File Two</h5> This is an image file.", size: 823782, caption: "Business 2.jpg", url: "/site/file-delete", key: 13},
{caption: "Lorem Ipsum.txt", type: "text", description: "<h5>File Three</h5> This is a Text file.", size: 1430, url: "/site/file-delete", key: 12},
{type: "pdf", description: "<h5>File Four</h5> This is a PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14},
{type: "video", description: "<h5>File Five</h5> This is a Video file.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},
],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",
},
});
</script>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.