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 Bootstrap 5 Theme (Default). You need to set the plugin theme property to bs5. This theme uses the icons from Bootstrap 5 Icons library. To ensure this theme works, you must pre-load the Bootstrap 5 Icons library assets/CSS.
fileinput.css and fileinput.js respectively. You must load the Bootstrap 5 Icons 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). <!-- BOOSTRAP 5 (DEFAULT THEME) THEME (BASIC) -->
<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/bs5/theme.js"></script>
<div class="file-loading">
<input id="inp-theme-bs5-1" name="inp-theme-bs5-1" type="file" multiple accept="image">
</div>
<script>
$("#inp-theme-bs5-1").fileinput({
theme: "bs5",
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>
<!-- BOOSTRAP 5 (DEFAULT THEME) THEME (ADVANCED) -->
<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.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-bs5-2" name="inp-theme-bs5-2[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#inp-theme-bs5-2").fileinput({
theme: "bs5",
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
{icons}
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>
<!-- BOOSTRAP 5 (DEFAULT THEME) THEME (ADVANCED) -->
<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.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: "bs5",
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.