Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

You may want to show custom icons based on file type for each preview thumbnail instead of embedding file content OR the default previewFileIcon. The plugin provides you with the ability to set different user friendly file type icons to be shown within the file thumbnail instead of the default previewFileIcon. This method also has an added advantage of an improved performance, since in this method the plugin does not incur the overhead of FileAPI reading and displaying the file content for preview. It is also useful, when you want to display icons for each file type instead of displaying content within the files. You must set the previewFileIconSettings to set the file type icon for each file extension. Note: For this to be effective, you must configure allowedPreviewTypes AND / OR allowedPreviewMimeTypes. These will enable you to allow the parsing of embedded content only for these selected file types and display file type icons for the rest. You can also configure previewFileExtSettings for advanced scenarios to auto-derive extensions via a callback.

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)

Disable preview of content for all file types and instead show file type icons. This example shows how you can set custom icons for the following file types: docx, xlsx, pptx, jpg, pdf, zip. This example uses font-awesome icons to generate the file icons. So to test these examples, you must have the font-awesome css loaded. However, you can use bootstrap provided glyphicons OR any other icon framework OR image markup to generate the file type thumbnails. This example also shows how you can override the default previewFileIcon.
<!-- Custom icons for docx, xlsx, pptx, jpg, pdf, zip -->
<div class="file-loading">
    <input id="input-ficons-1" name="input-ficons-1[]" multiple type="file">
</div>
<script>
$("#input-ficons-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    uploadAsync: true,
    previewFileIcon: '<i class="fa fa-file"></i>',
    allowedPreviewTypes: null, // set to empty, null or false to disable preview for all types
    previewFileIconSettings: {
        'docx': '<i class="fa fa-file-word-o text-primary"></i>',
        'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
        'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
        'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
        'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
        'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
    }
});
</script>
Advanced variation of scenario 1 that includes ability to auto derive icons for multiple file extensions via function callback. Set previewFileExtSettings with the same keys as set in previewFileIconSettings.
<!-- Custom icons with callback -->
<div class="file-loading">
    <input id="input-ficons-2" name="input-ficons-2[]" multiple type="file">
</div>
<script>
$("#input-ficons-2").fileinput({
    uploadUrl: "/file-upload-batch/2",
    uploadAsync: false,
    previewFileIcon: '<i class="fa fa-file"></i>',
    allowedPreviewTypes: null, // set to empty, null or false to disable preview for all types
    previewFileIconSettings: {
        '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>',
        'jpg': '<i class="fa fa-file-photo-o text-warning"></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>',
    },
    previewFileExtSettings: {
        '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(/(php|js|css|htm|html)$/i);
        },
        'txt': function(ext) {
            return ext.match(/(txt|ini|md)$/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 scenario 1 to display file content in preview for certain file types (e.g. image & text) but disallow others to be previewed (and show only iconic thumbnails).
<!-- Allow only certain file content for preview -->
<div class="file-loading">
    <input id="input-ficons-3" name="input-ficons-3[]" multiple type="file">
</div>
<script>
$("#input-ficons-3").fileinput({
    uploadUrl: "/file-upload-batch/2",
    previewFileIcon: '<i class="fa fa-file"></i>',
    allowedPreviewTypes: ['image', 'text'], // allow only preview of image & text files
    previewFileIconSettings: {
        'docx': '<i class="fa fa-file-word-o text-primary"></i>',
        'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
        'pptx': '<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>',
    }
});
</script>
Variation of scenario 3 to use mime types to configure the list of allowed preview types. You can set allowedPreviewMimeTypes for this use case. This example considers previewing content of only JPEG Images and Javascript files.
<!-- Allow only certain file content for preview -->
<div class="file-loading">
    <input id="input-ficons-4" name="input-ficons-4[]" multiple type="file">
</div>
<script>
$("#input-ficons-4").fileinput({
    uploadUrl: "/file-upload-batch/2",
    previewFileIcon: '<i class="fa fa-file"></i>',
    allowedPreviewTypes: null, // disable preview of standard types
    allowedPreviewMimeTypes: ['image/jpeg', 'text/javascript'], // allow content to be shown only for certain mime types 
    previewFileIconSettings: {
        'docx': '<i class="fa fa-file-word-o text-primary"></i>',
        'xls': '<i class="fa fa-file-excel-o text-success"></i>',
        'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
        'pptx': '<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>',
    }
});
</script>

Advanced preview with different configurations for normal thumbnails and zoomed file content. For example, show only an iconic preview for thumbnails, but display detailed content for zoomed content. One can set preferIconicPreview boolean property for this use case. This will use previewFileIconSettings to first detect and display an icon, else the file content will be used for preview where possible. The zoomed preview will however display the complete content for the use case.

For an example of using iconic preview for thumbnails in initial preview, refer the preview management demo.

<!-- Iconic preview for thumbs and detailed preview for zoom -->
<div class="file-loading">
    <input id="input-ficons-5" name="input-ficons-5[]" multiple type="file">
</div>
<script>
$("#input-ficons-5").fileinput({
    uploadUrl: "/file-upload-batch/2",
    uploadAsync: false,
    previewFileIcon: '<i class="fa fa-file"></i>',
    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-warning"></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 (reverse scenario) of scenario 5 to show detailed content for thumbnails but prefer iconic preview for zoomed content. For example, show only an iconic preview for thumbnails, but display detailed content for zoomed content. One can set preferIconicZoomPreview boolean property for this use case.

For an example of using iconic preview for thumbnails in initial preview, refer the preview management demo.

<!-- Detailed preview for thumbs and iconic preview for zoom -->
<div class="file-loading">
    <input id="input-ficons-6" name="input-ficons-6[]" multiple type="file">
</div>
<script>
$("#input-ficons-6").fileinput({
    uploadUrl: "/file-upload-batch/2",
    uploadAsync: false,
    previewFileIcon: '<i class="fa fa-file"></i>',
    preferIconicZoomPreview: true, // this will force zoom preview 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-warning"></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>

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.