Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Upload files recursively within folders using webkitdirectory. This feature is supported only by a few modern browsers like Chrome and IE Edge. To use this feature, one must use the file picker button (i.e. the Browse button) to select folder(s). Note: This feature is not available via drag and drop.

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)

An example where you wish to upload A SINGLE FILE only from the selected folder.
<label for="input-folder-1">Upload File From Folder</label>
<div class="file-loading">
    <input id="input-folder-1" type="file" webkitdirectory>
</div>
<script>
$(document).on('ready', function() {
    $("#input-folder-1").fileinput({
        browseLabel: 'Select Folder...'
    });
});
</script>
Multiple files upload. All files in the selected folders will be recursively selected for upload. Note that you may need to control the preview of allowed files for folder uploads. Else, reading and displaying large number of files in a folder for preview can use up your browser memory and impact performance.
<label for="input-folder-2">Upload All Files From Folder</label>
<div class="file-loading">
    <input id="input-folder-2" name="input-folder-2[]" type="file" multiple webkitdirectory accept="image/*">
</div>
<div id="errorBlock" class="help-block"></div>
<script>
$(document).on('ready', function() {
    $("#input-folder-2").fileinput({
        browseLabel: 'Select Folder...',
        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);
            },
            'jpg': function(ext) {
                return ext.match(/(jp?g|png|gif|bmp)$/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>

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.