Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

With release v4.3.2, the fileinput plugin includes advanced preview layout management, easily set initial preview with just the data instead of complete markup, sorting and rearranging initial preview, and zooming content in a slideshow format (with borderless/full-screen support).

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)

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>
<!-- purify plugin for safe rendering HTML content in preview -->
<script src="/path/to/js/plugins/purify.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
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
        // IMAGE DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg",
        // VIDEO DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",
        // OFFICE WORD DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleDOCFile_100kb.doc',
        // OFFICE EXCEL DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleXLSFile_38kb.xls',
        // OFFICE POWERPOINT DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/SamplePPTFile_500kb.ppt',
        // TIFF IMAGE FILE
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/multipage_tiff_example.tif',
        // ADOBE ILLUSTRATOR FILE
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/sample_ai.ai',
        // ENCAPSULATED POST SCRIPT FILE
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/sample_eps.eps',
        // PDF DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // TEXT DATA
        "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.",
        // HTML DATA
        '<div class="text-center">' + 
        '<h3>Lorem Ipsum</h3>' + 
        '<p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p>' + 
        '<h5><small>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</small></h5>' + 
        '<hr>' + 
        '</div>' + 
        '<div class="text-justify">' + 
        '<p>' + 
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis convallis dolor sed dignissim. Phasellus euismod mauris vel dolor maximus, sed fermentum mauris lobortis. Aliquam luctus, diam in luctus egestas, magna lacus luctus libero, scelerisque mattis ante dolor ac nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse varius orci ultricies massa euismod, at semper turpis fermentum. Quisque vitae augue vel lectus viverra facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacinia molestie diam, et volutpat nunc bibendum a. Cras a est sed augue commodo accumsan quis vitae nisi.' + 
        '</p>' + 
        '<p>' + 
        'Nunc sit amet metus et dui aliquet feugiat. Praesent lobortis, ipsum et elementum dignissim, urna libero fringilla justo, at tincidunt nisi mi sed mi. Integer vel est porttitor, tempor tortor non, lobortis felis. Curabitur porttitor nisi et volutpat iaculis. Fusce nec feugiat lectus, vitae ullamcorper lorem. Ut ultrices nunc imperdiet placerat malesuada. Proin commodo erat in egestas maximus.' + 
        '</p>' +
        '</div>'
    ],
    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: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
    initialPreviewConfig: [
        {caption: "Desert.jpg", size: 827000, width: "120px", url: "/file-upload-batch/2", key: 1},
        {caption: "Lighthouse.jpg", size: 549000, width: "120px", url: "/file-upload-batch/2", key: 2}, 
        {   
            type: "video", 
            size: 375000,
            filetype: "video/mp4",
            caption: "KrajeeSample.mp4", 
            url: "/file-upload-batch/2",
            key: 3,
            downloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4', // override url
            filename: 'KrajeeSample.mp4' // override download filename
        }, 
        {type: "office", size: 102400, caption: "SampleDOCFile_100kb.doc", url: "/file-upload-batch/2", key: 4}, 
        {type: "office", size: 45056, caption: "SampleXLSFile_38kb.xls", url: "/file-upload-batch/2", key: 5}, 
        {type: "office", size: 512000, caption: "SamplePPTFile_500kb.ppt", url: "/file-upload-batch/2", key: 6}, 
        {type: "office", size: 811008, caption: "multipage_tiff_example.tif", url: "/file-upload-batch/2", key: 7}, 
        {type: "office", size: 375808, caption: "sample_ai.ai", url: "/file-upload-batch/2", key: 8}, 
        {type: "office", size: 40960, caption: "sample_eps.eps", url: "/file-upload-batch/2", key: 9}, 
        {type: "pdf", size: 8000, caption: "About.pdf", url: "/file-upload-batch/2", key: 10, downloadUrl: false}, // disable download
        {type: "text", size: 1430, caption: "LoremIpsum.txt", url: "/file-upload-batch/2", key: 11, downloadUrl: false},  // disable download
        {type: "html", size: 3550, caption: "LoremIpsum.html", url: "/file-upload-batch/2", key: 12, downloadUrl: false}  // disable download
    ],
    purifyHtml: true, // this by default purifies HTML data for preview
    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="http://lorempixel.com/800/460/nature/1" class="kv-preview-data file-preview-image">',
        // IMAGE RAW MARKUP
        '<img src="http://lorempixel.com/800/460/nature/2" class="kv-preview-data file-preview-image">',
        // TEXT RAW MARKUP
        '<textarea class="kv-preview-data file-preview-text" 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: 'http://lorempixel.com/800/460/nature/{key}', // includes the dynamic key tag to be replaced for each config
    initialPreviewConfig: [
        {type: "image", caption: "Nature-1.jpg", size: 847000, url: "/site/file-delete", key: 1},
        {type: "image", caption: "Nature-2.jpg", size: 817000, url: "/site/file-delete", key: 2},  // set as raw markup
        {type: "text", 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
       'http://lorempixel.com/800/460/business/1',
        // IMAGE RAW MARKUP
        '<img src="http://lorempixel.com/800/460/business/2" class="kv-preview-data file-preview-image">',
        // PDF DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "http://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", size: 762980, url: "/site/file-delete", key: 8},
        {previewAsData: false, size: 823782, caption: "Business-2.jpg", url: "/site/file-delete", key: 9}, 
        {type: "pdf", size: 8000, caption: "PDF-Sample.pdf", url: "/file-upload-batch/2", key: 10}, 
        {type: "video", 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
       'http://lorempixel.com/800/460/business/1',
        // IMAGE RAW MARKUP
        '<img src="http://lorempixel.com/800/460/business/2" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        "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.",
        // PDF DATA
        'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "http://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", size: 762980, url: "/site/file-delete", key: 11},
        {previewAsData: false, size: 823782, caption: "Business 2", filename: "Business-2.jpg", url: "/site/file-delete", key: 13}, 
        {caption: "Lorem Ipsum", filename: "LoremIpsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", size: 8000, caption: "PDF Sample", filename: "PDF-Sample.pdf", url: "/file-upload-batch/2", key: 14}, 
        {type: "video", 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="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>',
        '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>',
        // note for these file types below no extension determination logic 
        // has been configured (the keys itself will be used as extensions)
        'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 
        'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 
        'png': '<i class="fa fa-file-photo-o 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>

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.