Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Krajee Explorer Theme is a new theme available from release v4.3.7 of the plugin. The theme provides an interesting alternative to displaying the file thumbnails for preview as a file explorer format. The theme files (theme.js and theme.css) are included in the themes/explorer folder of the plugin repo. You need to load these theme files after fileinput.js and fileinput.css. The theme name to use in your plugin configuration is explorer.

Tip

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)

Basic usage of Krajee Explorer Theme with an initial preview configuration and file extensions restricted to image files (jpg, png, gif). Note that you must load the CSS files and the JS files for the theme after fileinput.css and fileinput.js respectively. 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).
<!-- KRAJEE EXPLORER THEME (BASIC) -->

<!-- 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-1" name="input-ke-1[]" type="file" multiple accept="image">
</div>
<script>
$("#input-ke-1").fileinput({
    theme: "explorer",
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    initialPreviewAsData: true,
    initialPreview: [
        "http://lorempixel.com/1920/1080/nature/1",
        "http://lorempixel.com/1920/1080/nature/2",
        "http://lorempixel.com/1920/1080/nature/3"
    ],
    initialPreviewConfig: [
        {caption: "nature-1.jpg", size: 329892, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "nature-2.jpg", size: 872378, width: "120px", url: "/site/file-delete", key: 2},
        {caption: "nature-3.jpg", size: 632762, width: "120px", url: "/site/file-delete", key: 3}
    ],
    initialPreviewDownloadUrl: 'http://lorempixel.com/1920/1080/nature/{key}' // the key will be dynamically replaced  
});
</script>
Advanced usage of Krajee Explorer Theme with an initial preview configuration and allowing all file types, but only iconic previews for thumbnails. Files can be zoomed and previewed. This example uses Font Awesome icons for loading the file icons and hence the font-awesome CSS assets need to be loaded on your page. 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).
<!-- KRAJEE EXPLORER 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-2" name="input-ke-2[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#input-ke-2").fileinput({
    theme: "explorer",
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    previewFileIcon: '<i class="fa fa-file"></i>',
    initialPreview: [
        // IMAGE DATA
       'http://lorempixel.com/800/460/business/1',
        // IMAGE RAW MARKUP
        '<img src="http://lorempixel.com/800/460/business/2" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.",
        // PDF DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
    ],
    initialPreviewAsData: true, // defaults markup  
    initialPreviewConfig: [
        {caption: "Business 1.jpg", size: 762980, url: "/site/file-delete", downloadUrl: 'http://lorempixel.com/800/460/business/1', key: 11},
        {previewAsData: false, size: 823782, caption: "Business 2.jpg", url: "/site/file-delete", downloadUrl: 'http://lorempixel.com/800/460/business/2', key: 13}, 
        {caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
        {type: "video", 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 fa-file-word-o text-primary"></i>',
        'xls': '<i class="fa fa-file-excel-o text-success"></i>',
        'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
        'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
        'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
        'htm': '<i class="fa fa-file-code-o text-info"></i>',
        'txt': '<i class="fa fa-file-text-o text-info"></i>',
        'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
        'mp3': '<i class="fa fa-file-audio-o 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 fa-file-photo-o text-danger"></i>', 
        'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 
        'png': '<i class="fa fa-file-photo-o 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>
Variation of theme rendering with hidden thumbnail content in preview. This will only display the file name and file size as defined in the layout templates and hide the thumbnail content.
<!-- KRAJEE EXPLORER 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: "explorer",
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE DATA
       'http://lorempixel.com/800/460/business/1',
        // IMAGE RAW MARKUP
        '<img src="http://lorempixel.com/800/460/business/2" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.",
        // PDF DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
    ],
    initialPreviewAsData: true, // defaults markup  
    initialPreviewConfig: [
        {caption: "Business 1.jpg", size: 762980, url: "/site/file-delete", key: 11},
        {previewAsData: false, size: 823782, caption: "Business 2.jpg", url: "/site/file-delete", key: 13}, 
        {caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
        {type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},  
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature",
    },
});
</script>

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.