Various methods to manage your preview. The following features are demonstrated in this example:

• The initialPreviewAsData property is set to true. This allows you to just pass only the data in the initialPreview property, and not the entire markup (a feature available from v4.3.2 of the plugin). The data will be automatically parsed and markup rendered using previewTemplates based on the preview file type.

• The initialPreviewConfig property has additional configurations from v4.3.2. You can configure the file type for the plugin to auto pick up the template to display each file. If this is not set the default initialPreviewFileType property will be used (which defaults to image).

• Ability to zoom and check a detailed preview/slideshow for various types of files. For the example below the image, video, pdf, text, and html types are demonstrated.

• Various zoom preview features. Check the borderless maximizing of screen, full screen preview, and hide header features in the zoom content. Auto navigate between preview thumbnails using the indicators or keyboard left / right buttons. Note also that freshly selected files (via browse/drag-drop) can also be zoomed in combination with the initial preview.

• Ability to reorder and sort/rearrange initial preview content. Check the drag indicator on left bottom to drag the thumbnails and rearrange them.

• Trap your modified file stack in initial preview via filesorted event (the plugin outputs this as a console log for this example). You can also get this by reading the initialPreviewConfig property of the plugin for getting the latest sorted data.

NOTE:

• This example also shows how you can configure the download feature alternatively by providing the universal URL initialPreviewDownloadUrl for downloading the files. You can also provide the {filename} token/tag which will be dynamically replaced with the filename property if set (or the caption property) within each thumbnail setting in initialPreviewConfig. You can override the download button to be not shown for specific thumbnails by setting downloadUrl to false within initialPreviewConfig.

• NEW This example also shows how to setup preview of OFFICE document files (Word, Excel, Powerpoint) within initial preview (feature available from plugin release v4.4.6).

<!-- PREVIEW DATA -->
<!-- load the JS files in the right order -->
<!-- sortable plugin for sorting/rearranging initial preview -->
<script src="/path/to/js/plugins/sortable.min.js"></script>
<script src="/path/to/js/fileinput.js"></script>


<div class="file-loading">
    <input id="input-pd" name="input-pd[]" type="file" multiple>
</div>
<script>
$("#input-pd").fileinput({
    uploadUrl: "/file-upload-batch/1",
    uploadAsync: false,
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
        // IMAGE DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg",
        // VIDEO DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",
        // OFFICE WORD DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleDOCFile_100kb.doc',
        // OFFICE EXCEL DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleXLSFile_38kb.xls',
        // OFFICE POWERPOINT DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SamplePPTFile_500kb.ppt',
        // TIFF IMAGE FILE
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/multipage_tiff_example.tif',
        // ADOBE ILLUSTRATOR FILE
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/sample_ai.ai',
        // ENCAPSULATED POST SCRIPT FILE
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/sample_eps.eps',
        // PDF DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // TEXT DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
        // HTML DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleHTML.htm',
    ],
    initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
    initialPreviewDownloadUrl: 'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
    initialPreviewConfig: [
        {caption: "Desert.jpg", description: "<h5>The Desert</h5> This is a representative description number one for this image.", size: 827000, width: "120px", url: "/file-upload-batch/2", key: 1},
        {caption: "Lighthouse.jpg", description: "<h5>The Lighthouse</h5> This is a representative description number two for this image.", size: 549000, width: "120px", url: "/file-upload-batch/2", key: 2}, 
        {   
            type: "video", 
            description: "<h5>The Video</h5> This is a representative description number three for this file.", 
            size: 375000,
            filetype: "video/mp4",
            caption: "KrajeeSample.mp4", 
            url: "/file-upload-batch/2",
            key: 3,
            downloadUrl: 'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4', // override url
            filename: 'KrajeeSample.mp4' // override download filename
        }, 
        {type: "office", description: "<h5>Word Document</h5> This is a representative description number four for this file.", size: 102400, caption: "SampleDOCFile_100kb.doc", url: "/file-upload-batch/2", key: 4}, 
        {type: "office", description: "<h5>Excel Spreadsheet</h5> This is a representative description number five for this file.", size: 45056, caption: "SampleXLSFile_38kb.xls", url: "/file-upload-batch/2", key: 5}, 
        {type: "office", description: "<h5>Powerpoint Presentation</h5> This is a representative description number six for this file.", size: 512000, caption: "SamplePPTFile_500kb.ppt", url: "/file-upload-batch/2", key: 6}, 
        {type: "gdocs", description: "<h5>TIFF Image</h5> This is a representative description number seven for this file.", size: 811008, caption: "multipage_tiff_example.tif", url: "/file-upload-batch/2", key: 7}, 
        {type: "gdocs", description: "<h5>AI File</h5> This is a representative description number eight for this file.", size: 375808, caption: "sample_ai.ai", url: "/file-upload-batch/2", key: 8}, 
        {type: "gdocs", description: "<h5>EPS File</h5> This is a representative description number nine for this file.", size: 40960, caption: "sample_eps.eps", url: "/file-upload-batch/2", key: 9}, 
        {type: "pdf", description: "<h5>PDF File</h5> This is a representative description number ten for this file.", size: 8000, caption: "About.pdf", url: "/file-upload-batch/2", key: 10, downloadUrl: false}, // disable download
        {type: "text", description: "<h5>Text File</h5> This is a representative description number eleven for this file.", size: 1430, caption: "LoremIpsum.txt", url: "/file-upload-batch/2", key: 11, downloadUrl: false},  // disable download
        {type: "html", description: "<h5>HTML File</h5> This is a representative description number twelve for this file.", size: 3550, caption: "LoremIpsum.html", url: "/file-upload-batch/2", key: 12, downloadUrl: false}  // disable download
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, places"
    }
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
    console.log('File uploaded params', params);
});
</script>

An alternative of previous demo scenario where you can setup a raw markup in initialPreview instead of data. You set the initialPreviewAsData property to false and proceed just like in plugin versions prior to v4.3.2.

This example also shows how you can configure the download feature alternatively by providing the universal URL initialPreviewDownloadUrl for downloading the files. You can also provide the {key} token/tag which will be dynamically replaced with the key property within each thumbnail setting in initialPreviewConfig. You can override the download button to be not shown for specific thumbnails by setting downloadUrl to false within initialPreviewConfig.

<div class="file-loading">
    <input id="input-pr" name="input-pr[]" type="file" multiple>
</div>
<script>
$("#input-pr").fileinput({
    uploadUrl: "/file-upload-batch/1",
    uploadAsync: false,
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/239/1920/1080" class="kv-preview-data file-preview-image">',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/279/1920/1080" class="kv-preview-data file-preview-image">',
        // TEXT RAW MARKUP
        '<textarea class="kv-preview-data file-preview-text font-monospace" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.</textarea>'
    ],
    initialPreviewAsData: false, // allows you to set a raw markup
    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
    initialPreviewDownloadUrl: 'https://picsum.photos/id/{key}/1920/1080', // includes the dynamic key tag to be replaced for each config
    initialPreviewConfig: [
        {type: "image", caption: "Image-1.jpg", description: "<h5>Number One</h5> This is a representative placeholder description # 1 for this image.", size: 847000, url: "/site/file-delete", key: 1},
        {type: "image", caption: "Image-2.jpg", description: "<h5>Number Two</h5> This is a representative placeholder description # 2 for this image.", size: 817000, url: "/site/file-delete", key: 2},  // set as raw markup
        {type: "text", description: "<h5>Number Three</h5> This is a representative placeholder description # 3 for this text file.", size: 1430, caption: "LoremIpsum.txt", url: "/site/file-delete", key: 3, downloadUrl: false} // do not show download
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature"
    }
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
    console.log('File uploaded params', params);
});
</script>

Configure advanced properties in initialPreviewConfig. Combine both data and raw markup by setting the previewAsData boolean property for each file config. In addition set type at config level to identify the preview template and filetype for specific templates like the video.

<div class="file-loading">
    <input id="input-pa" name="input-pa[]" type="file" multiple>
</div>
<script>
$("#input-pa").fileinput({
    uploadUrl: "/file-upload-batch/1",
    uploadAsync: false,
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE DATA
       'https://picsum.photos/id/700/1920/1080',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/701/1920/1080" class="kv-preview-data file-preview-image">',
        // 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
    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
    initialPreviewConfig: [
        {caption: "Business-1.jpg", description: "<h5>Number One</h5> This is a representative placeholder description # 1 for this image.", size: 762980, url: "/site/file-delete", key: 8},
        {previewAsData: false, description: "<h5>Number Two</h5> This is a representative placeholder description # 2 for this image.", size: 823782, caption: "Business-2.jpg", url: "/site/file-delete", key: 9}, 
        {type: "pdf", description: "<h5>Number Three</h5> This is a representative placeholder description # 3 for this PDF file.", size: 8000, caption: "PDF-Sample.pdf", url: "/file-upload-batch/2", key: 10}, 
        {type: "video", description: "<h5>Number Four</h5> This is a representative placeholder description # 4 for this video file.", size: 375000, filetype: "video/mp4", caption: "KrajeeSample.mp4", url: "/file-upload-batch/2", key: 11}
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature"
    }
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
    console.log('File uploaded params', params);
});
</script>

A variation of above scenario to show ICONIC thumbnails in initial preview, but detailed content in the zoomed preview. This scenario combines the iconic preview for initial preview data. Also check, how you can pass and set both caption as well as a filename for each file in your initialPreviewConfig. The filename is useful in parsing the file's extension and its template and is used for rendering the iconic preview in this case. The caption will be displayed below each thumbnail and will be used by default as the filename in case the filename is not configured.

For examples of using other iconic previews refer the iconic preview demo # 5 or iconic preview demo # 6.

<div class="file-loading">
    <input id="input-iconic" name="input-iconic[]" type="file" multiple>
</div>
<script>
$("#input-iconic").fileinput({
    uploadUrl: "/file-upload-batch/1",
    uploadAsync: false,
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE DATA
       'https://picsum.photos/id/702/1920/1080',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/703/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
    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
    initialPreviewConfig: [
        {caption: "Business 1", filename: "Business-1.jpg", description: "<h5>Number One</h5> This is a representative placeholder description # 1 for this image.", size: 762980, url: "/site/file-delete", key: 11},
        {previewAsData: false, description: "<h5>Number Two</h5> This is a representative placeholder description # 2 for this image.", size: 823782, caption: "Business 2", filename: "Business-2.jpg", url: "/site/file-delete", key: 13}, 
        {caption: "Lorem Ipsum", filename: "LoremIpsum.txt", type: "text", description: "<h5>Number Three</h5> This is a representative placeholder description # 3 for this text file.", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", description: "<h5>Number Four</h5> This is a representative placeholder description # 4 for this PDF file.", size: 8000, caption: "PDF Sample", filename: "PDF-Sample.pdf", url: "/file-upload-batch/2", key: 14}, 
        {type: "video", description: "<h5>Number Five</h5> This is a representative placeholder description # 5 for this video file.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample", filename: "KrajeeSample.mp4", url: "/file-upload-batch/2", key: 15} 
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature",
    },
    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-alt text-info"></i>',
        'mov': '<i class="fas fa-file-video 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-muted"></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);
        }
    }
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
    console.log('File uploaded params', params);
});
</script>

Reversing the order of files displayed in the preview with latest one on the top. You need to set reversePreviewOrder to true

This example also uses the Krajee Explorer Font Awesome 5.x Theme, where this reverse order setting maybe more pertinent for the user.

<div class="file-loading">
    <input id="input-pr-rev" name="input-pr-rev[]" type="file" multiple>
</div>
<script>
$("#input-pr-rev").fileinput({
    uploadUrl: "/file-upload-batch/1",
    theme: 'explorer-fa5',
    uploadAsync: true,
    reversePreviewOrder: true,
    initialPreviewAsData: true,
    overwriteInitial: false,
    initialPreview: [
        "https://picsum.photos/id/900/1920/1080",
        "https://picsum.photos/id/901/1920/1080",
        "https://picsum.photos/id/902/1920/1080",
        "https://picsum.photos/id/903/1920/1080",
        "https://picsum.photos/id/904/1920/1080"
    ],
    initialPreviewConfig: [
        {caption: "Picture-3.jpg", description: "<h5>Number One</h5> This is a representative placeholder description number one for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 3},
        {caption: "Picture-4.jpg", description: "<h5>Number Two</h5> This is a representative placeholder description number two for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 4},
        {caption: "Picture-5.jpg", description: "<h5>Number Three</h5> This is a representative placeholder description number three for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 5},
        {caption: "Picture-6.jpg", description: "<h5>Number Four</h5> This is a representative placeholder description number four for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 6},
        {caption: "Picture-7.jpg", description: "<h5>Number Five</h5> This is a representative placeholder description number five for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 7} 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
}).on('filesorted', function(e, params) {
    console.log('Modified initial preview is ', $("#input-pr-rev").data('fileinput').initialPreview);
})
</script>

An example of special PDF rendering using the PDF JS library only for iOS & Android devices and IE11 browser platforms. You need to set the pdfRendererUrl property to the PDF JS Viewer Library URL on your same web server. Note that CROSS ORIGIN Requests may not be supported depending on your CORS configuration, so the PDF JS Viewer library can only be used to preview PDF files hosted out of your server (OR files picked via file input at runtime).

You can check how files both in initialPreview as well as normal preview at runtime are both rendered via the PDF JS library.

Note that the PDF JS Rendering library in this example is enabled only for rendering on iOS & Android devices and IE11 browser platforms. This is controlled by the usePdfRenderer setting which defaults to the following callback:

function() {
    var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
    return !!navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/i) || isIE11;
}

<div class="file-loading">
    <input id="file-kv-pdf" name="file-kv-pdf[]" type="file" multiple>
</div>
<script>
$('#file-kv-pdf').fileinput({
    uploadUrl: "/file-upload-batch/1",
    pdfRendererUrl: 'https://plugins.krajee.com/pdfjs/web/viewer.html',
    overwriteInitial: false,
    initialPreviewAsData: true,
    initialPreview: [
        'https://plugins.krajee.com/samples/sample-2.pdf'
    ],
    initialPreviewConfig: [
        {type: 'pdf', description: "<h5>PDF File One</h5> This is a representative placeholder description number one for this PDF file.", size: 3072}
    ]
});
</script>