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. You must load the Bootstrap 5 Icons CSS for the theme to render the right icons. 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="inp-krajee-explorer-1" name="inp-krajee-explorer-1" type="file" multiple accept="image">
</div>
<script>
$("#inp-krajee-explorer-1").fileinput({
    theme: "explorer",
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    initialPreviewAsData: true,
    maxFileSize: 10000,
    removeFromPreviewOnError: true,
    initialPreview: [
        "https://picsum.photos/id/101/1920/1080",
        "https://picsum.photos/id/102/1920/1080",
        "https://picsum.photos/id/103/1920/1080"
    ],
    initialPreviewConfig: [
        {caption: "picture-1.jpg", description: "<h5>Picture One</h5> This is a representative placeholder description for the first image.", size: 329892, width: "120px", url: "/site/file-delete", key: 101},
        {caption: "picture-2.jpg", description: "<h5>Picture Two</h5> This is a representative placeholder description for the second image.", size: 872378, width: "120px", url: "/site/file-delete", key: 102},
        {caption: "picture-3.jpg", description: "<h5>Picture Three</h5> This is a representative placeholder description for the third image.", size: 632762, width: "120px", url: "/site/file-delete", key: 103}
    ],
    initialPreviewDownloadUrl: 'https://picsum.photos/id/{key}/1920/1080' // 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. You must load the Bootstrap 5 Icons CSS for the theme to render the right icons. This example also 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>

<div class="file-loading">
    <input id="inp-krajee-explorer-2" name="inp-krajee-explorer-2[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#inp-krajee-explorer-2").fileinput({
    theme: "explorer",
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    maxFileCount: 5,
    maxFileSize: 10000,
    removeFromPreviewOnError: true,
    overwriteInitial: false,
    previewFileIcon: '<i class="fas fa-file"></i>',
    initialPreview: [
        // IMAGE DATA
       'https://picsum.photos/id/1071/1920/1080',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/1075/1920/1080" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
        // PDF DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
    ],
    initialPreviewAsData: true, // defaults markup  
    initialPreviewConfig: [
        {caption: "Image 11.jpg", description: "<h5>File One</h5> This is an image file.", size: 762980, url: "/site/file-delete", downloadUrl: 'https://picsum.photos/id/1071/1920/1080', key: 1071},
        {previewAsData: false, description: "<h5>File Two</h5> This is also an image file.", size: 823782, caption: "Image 13.jpg", url: "/site/file-delete", downloadUrl: 'https://picsum.photos/id/1075/1920/1080', key: 1075}, 
        {caption: "Lorem Ipsum.txt", type: "text", description: "<h5>File Three</h5> This is a text file.", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", description: "<h5>File Four</h5> This is a PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
        {type: "video", description: "<h5>File Five</h5> This is a Video file.", 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
    {icons}
    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. You must load the Bootstrap 5 Icons CSS for the theme to render the right icons.

<!-- 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">
<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
       'https://picsum.photos/id/718/1920/1080',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/719/1920/1080" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
        // PDF DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
    ],
    initialPreviewAsData: true, // defaults markup  
    initialPreviewConfig: [
        {caption: "Business 1.jpg", description: "<h5>File One</h5> This is an image file.", size: 762980, url: "/site/file-delete", key: 11},
        {previewAsData: false, description: "<h5>File Two</h5> This is an image file.", size: 823782, caption: "Business 2.jpg", url: "/site/file-delete", key: 13}, 
        {caption: "Lorem Ipsum.txt", type: "text", description: "<h5>File Three</h5> This is a Text file.", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", description: "<h5>File Four</h5> This is a PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
        {type: "video", description: "<h5>File Five</h5> This is a Video file.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},  
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature",
    },
});
</script>