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).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).ready(function() {
    $("#input-folder-2").fileinput({
        browseLabel: 'Select Folder...',
        previewFileIcon: '<i class="fas fa-file"></i>',
        allowedPreviewTypes: null, // set to empty, null or false to disable preview for all types
        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-alt text-info"></i>',
            'mov': '<i class="fas fa-file-video 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);
            },
            '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>

An example of dragging and dropping folders (supported only on webkit browsers like Chrome). This is applicable only for ajax uploads. You can select a combination of files and folders and the plugin will automatically deep scan nested folders to read all files across folders. This example hides thumbnail content for preview for better performance with larger number of files.

<label for="input-folder-3">Select files/folders</label>
<div class="file-loading">
    <input id="input-folder-3" name="input-folder-3[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
    $("#input-folder-3").fileinput({
        uploadUrl: "/file-upload-batch/2",
        hideThumbnailContent: true // hide image, pdf, text or other content in the thumbnail preview
    });
});
</script>