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.
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)
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="fas fa-file"></i>',
allowedPreviewTypes: null, // set to empty, null or false to disable preview for all types
previewFileIconSettings: {
'docx': '<i class="fas fa-file-word text-primary"></i>',
'xlsx': '<i class="fas fa-file-excel text-success"></i>',
'pptx': '<i class="fas fa-file-powerpoint text-danger"></i>',
'jpg': '<i class="fas fa-file-image text-warning"></i>',
'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
'zip': '<i class="fas fa-file-archive text-muted"></i>',
}
});
</script>
<!-- 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,
alwaysPreviewFileExtensions: ['jpg', 'png', 'gif'],
previewFileIcon: '<i class="fas fa-file"></i>',
previewFileIconSettings: {
'doc': '<i class="fas fa-file-word text-primary"></i>',
'xls': '<i class="fas fa-file-excel text-success"></i>',
'ppt': '<i class="fas fa-file-powerpoint text-danger"></i>',
'jpg': '<i class="fas fa-file-image text-warning"></i>',
'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
'zip': '<i class="fas fa-file-archive text-muted"></i>',
'htm': '<i class="fas fa-file-code text-info"></i>',
'txt': '<i class="fas fa-file-text text-info"></i>',
'mov': '<i class="fas fa-file-movie-o text-warning"></i>',
'mp3': '<i class="fas fa-file-audio 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>
<!-- 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="fas fa-file"></i>',
allowedPreviewTypes: ['image', 'text'], // allow only preview of image & text files
previewFileIconSettings: {
'docx': '<i class="fas fa-file-word text-primary"></i>',
'xlsx': '<i class="fas fa-file-excel text-success"></i>',
'pptx': '<i class="fas fa-file-powerpoint text-danger"></i>',
'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
'zip': '<i class="fas fa-file-archive text-muted"></i>',
}
});
</script>
<!-- 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="fas 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="fas fa-file-word text-primary"></i>',
'xls': '<i class="fas fa-file-excel text-success"></i>',
'xlsx': '<i class="fas fa-file-excel text-success"></i>',
'pptx': '<i class="fas fa-file-powerpoint text-danger"></i>',
'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
'zip': '<i class="fas fa-file-archive 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="fas 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="fas fa-file-word text-primary"></i>',
'xls': '<i class="fas fa-file-excel text-success"></i>',
'ppt': '<i class="fas fa-file-powerpoint text-danger"></i>',
'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
'zip': '<i class="fas fa-file-archive text-muted"></i>',
'htm': '<i class="fas fa-file-code text-info"></i>',
'txt': '<i class="fas fa-file-text text-info"></i>',
'mov': '<i class="fas fa-file-movie-o text-warning"></i>',
'mp3': '<i class="fas 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="fas fa-file-image text-danger"></i>',
'gif': '<i class="fas fa-file-image text-warning"></i>',
'png': '<i class="fas 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>
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="fas 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="fas fa-file-word text-primary"></i>',
'xls': '<i class="fas fa-file-excel text-success"></i>',
'ppt': '<i class="fas fa-file-powerpoint text-danger"></i>',
'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
'zip': '<i class="fas fa-file-archive text-muted"></i>',
'htm': '<i class="fas fa-file-code text-info"></i>',
'txt': '<i class="fas fa-file-text text-info"></i>',
'mov': '<i class="fas fa-file-movie-o text-warning"></i>',
'mp3': '<i class="fas 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="fas fa-file-image text-danger"></i>',
'gif': '<i class="fas fa-file-image text-warning"></i>',
'png': '<i class="fas 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>
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.