This example shows a basic resumable upload setup to upload large sized files as smaller chunks. You can select multiple files in this example. You need to set enableResumableUpload to true for enabling resumable uploads. The uploadUrl will receive each file chunk for processing. The maximum file count that can be selected simultaneously for upload is set to 5. The default chunk size settings are used (i.e. 2048 KB or 2 MB per chunk). The example also shows configuration of showZoom within fileActionSettings as a callback function (whereby the zoom button in the file thumbnails is displayed only for specific selected file types i.e. pdf and image).

Note that once you click upload, only the pause button is shown for pausing and resuming the upload from the last position. The cancel button is by default not displayed.

Refer the resumable uploads section for overview on setting up resumable / chunk uploads including a sample server code (PHP example) for processing the file chunks on the server.

<label for="input-res-1">File Gallery</label>
<div class="file-loading">
    <input id="input-res-1" name="input-res-1[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
    $("#input-res-1").fileinput({
        uploadUrl: "/site/test-upload",
        enableResumableUpload: true,
        initialPreviewAsData: true,
        maxFileCount: 5,
        theme: 'fa5',
        deleteUrl: '/site/file-delete',
        fileActionSettings: {
            showZoom: function(config) {
                if (config.type === 'pdf' || config.type === 'image') {
                    return true;
                }
                return false;
            }
        }
    });
});
</script>

A variation of scenario # 1, where the plugin includes an option to test the status of a partially uploaded earlier file and resume upload from the previously uploaded point. To test this example, first download this 30MB sample image file to your client and try to upload (without changing the file name). The testUrl within resumableUploadOptions will validate the chunksUploaded as an array list of 14 chunk indices already uploaded. The upload will recalibrate and resume from ~52% progress onwards. For this example, the chunkSize is set to 1024 KB (i.e. 1 MB) within resumableUploadOptions. The example also enables the cancel button for cancelling/aborting uploads by setting showCancel to explicitly true. Note that only image files are allowed for this example by setting allowedFileTypes and the accept attribute within the native file input markup. Note also that you may not be able to preview the content of the 30 MB image file for this example, as it is controlled by the maxFilePreviewSize (which defaults to 25600 KB i.e. 25 MB).

Refer the resumable uploads section for overview on setting up resumable / chunk uploads including a sample server code (PHP example) for processing the file chunks on the server.

<label for="input-res-2">File Gallery</label>
<div class="file-loading">
    <input id="input-res-2" name="input-res-2[]" type="file" multiple accept="image/*">
</div>
<script>
$(document).ready(function() {
    $("#input-res-2").fileinput({
        uploadUrl: "/site/test-upload",
        enableResumableUpload: true,
        initialPreviewAsData: true,
        allowedFileTypes: ['image'],
        showCancel: true,
        resumableUploadOptions: {
            testUrl: "/site/test-file-chunks",
            chunkSize: 1024, // 1 MB chunk size
        },
        maxFileCount: 5,
        theme: 'fa5',
        deleteUrl: '/site/file-delete',
        fileActionSettings: {
            showZoom: function(config) {
                if (config.type === 'pdf' || config.type === 'image') {
                    return true;
                }
                return false;
            }
        }
    });
});
</script>

A variation of scenario 1 to show few other ways to configure the plugin for resumable uploads. You can set uploadExtraData to send and receive additional data and information. For example, this scenario sends an uploadToken via uploadExtraData to validate the rights/accesses for the upload. This example shows how to use the plugin resumable events like fileuploaded, fileuploaderror, and filebatchuploadcomplete. Check the browser console for data received via these events. This example also shows how you can have an initialPreview and initialPreviewConfig configured for displaying initially uploaded files. It also uses an icon only preview for this example via the preferIconicPreview, previewFileIconSettings, and previewFileExtSettings settings.

Refer the resumable uploads section for overview on setting up resumable / chunk uploads including a sample server code (PHP example) for processing the file chunks on the server.

<label for="input-res-3">File Gallery</label>
<div class="file-loading">
    <input id="input-res-3" name="input-res-3[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
    $("#input-res-3").fileinput({
        uploadUrl: "/site/upload-file-chunks",
        enableResumableUpload: true,
        initialPreviewAsData: true,
        maxFileCount: 5,
        theme: 'fa5',
        deleteUrl: '/site/file-delete',
        uploadExtraData: {
            uploadToken: "SOME_VALID_TOKEN"
        },
        overwriteInitial: false,
        initialPreview: [
            // 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: "Lorem Ipsum.txt", type: "text", description: "<h5>Content # 1</h5> Enjoy this Lorem Ipsum text.", size: 1430, url: "/site/file-delete", key: 12}, 
            {type: "pdf", description: "<h5>Content # 2</h5> Enjoy this sample PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
            {type: "video", description: "<h5>Content # 3</h5> Enjoy this sample video.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15} 
        ],
        preferIconicPreview: true,
        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('fileuploaded', function(event, previewId, index, fileId) {
        console.log('File Uploaded', 'ID: ' + fileId + ', Thumb ID: ' + previewId);
    }).on('fileuploaderror', function(event, previewId, index, fileId) {
        console.log('File Upload Error', 'ID: ' + fileId + ', Thumb ID: ' + previewId);
    }).on('filebatchuploadcomplete', function(event, preview, config, tags, extraData) {
        console.log('File Batch Uploaded', preview, config, tags, extraData);
    });

    // uncomment below if you need to monitor file upload chunk status or take actions based on events
    /*
    $("#input-res-3").on('filechunkbeforesend', function(event, fileId, index, retry, fm, rm, outData) {
        console.log('File Chunk Before Send', 'ID: ' + fileId + ', Index: ' + index + ', Retry: ' + retry);
    }).on('filechunksuccess', function(event, fileId, index, retry, fm, rm, outData) {
        console.log('File Chunk Success', 'ID: ' + fileId + ', Index: ' + index + ', Retry: ' + retry);
    }).on('filechunkerror', function(event, fileId, index, retry, fm, rm, outData) {
        console.log('File Chunk Error', 'ID: ' + fileId + ', Index: ' + index + ', Retry: ' + retry);
    }).on('filechunkajaxerror', function(event, fileId, index, retry, fm, rm, outData) {
        console.log('File Chunk Ajax Error', 'ID: ' + fileId + ', Index: ' + index + ', Retry: ' + retry);
    }).on('filechunkcomplete', function(event, fileId, index, retry, fm, rm, outData) {
        console.log('File Chunk Complete', 'ID: ' + fileId + ', Index: ' + index + ', Retry: ' + retry);
    });
    */

    // uncomment below if you need file's test status (via resumableUploadOptions.testUrl) or take actions based on events
    /*
    $("#input-res-3").on('filetestbeforesend', function(event, fileId, fm, rm, outData) {
        console.log('File Test Before Send', 'ID: ' + fileId);
    }).on('filetestsuccess', function(event, fileId, fm, rm, outData) {
        console.log('File Test Success', 'ID: ' + fileId);
    }).on('filetesterror', function(event, fileId, fm, rm, outData) {
        console.log('File Test Error', 'ID: ' + fileId);
    }).on('filetestajaxerror', function(event, fileId, fm, rm, outData) {
        console.log('File Test Ajax Error', 'ID: ' + fileId);
    }).on('filetestcomplete', function(event, fileId, fm, rm, outData) {
        console.log('File Test Complete', 'ID: ' + fileId);
    });;
    */
});
</script>