Chunk Upload

The Upload enables you to upload chunks of files from local file systems to dedicated server handlers which are configured to receive them.

To enable chunk upload, set the async-chunk-side property to true. Each request sends a separate file blob and additional string metadata to the server. This metadata is in a stringified JSON format and contains the chunkIndex, contentType, totalFileSize, totalChunks, and uploadUid properties. These properties enable the validation and combination of the files on the server. The response also returns a JSON object with the uploaded and fileUid properties which notify the client what the next chunk is.

<div id="vueapp" class="vue-app">
    <kendo-upload ref="upload"
                  name="files"
                  :async-save-url="'custom-save-url'"
                  :async-remove-url="'custom-remove-url'"
                  :async-chunk-size="11111">
    </kendo-upload>
</div>
Vue.use(UploadInstaller);

new Vue({
    el: "#vueapp",
    mounted: function () {
        /*
            The code in this function is only added to simulate a successful upload request for this demo.
            Do not use the code in other cases when working with the Upload component.
        */
        var upload = this.$refs.upload.kendoWidget();

        upload._module.postFormData = function (url, data, fileEntry, xhr) {
            var module = this;
            var counter = 0;
            var uid = fileEntry.data("files")[0].uid;
            var refreshIntervalId = setInterval(function () {
                if (counter > 100) {
                    clearInterval(refreshIntervalId);
                    var e = { target: { responseText: '{"uploaded":true,"fileUid":"' + uid + '"}', statusText: "OK", status: 200 } };
                    module.onRequestSuccess.call(module, e, fileEntry);
                    return;
                }
                module.upload._onFileProgress({ target: $(fileEntry, module.upload.wrapper) }, counter);
                counter += 10;
            }, 100);
        };

        upload._submitRemove = function (fileNames, eventArgs, onSuccess, onError) {
            onSuccess();
        };
        upload._module.stopUploadRequest= function(fileEntry) {};
    }
})

In this article