chunk-upload-stack.json

{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n    <div class=\"control_wrapper\">\n        <!-- Initialize Uploader -->\n        <input type=\"file\" id=\"fileupload\" name=\"UploadFiles\">\n    </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n    <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n        <tbody><tr>\n            <td class=\"left-side\">Chunk size :</td>\n            <td>\n                <div id=\"default\">\n                    <select id=\"chunk-sizes\"> \n                        <option value=\"500000\">500 KB</option>\n                        <option value=\"1000000\">1 MB</option>\n                        <option value=\"2000000\">2 MB</option>\n                    </select>\n                </div>\n            </td>\n        </tr>\n    </tbody></table>\n</div>\n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n    var dropElement = document.getElementsByClassName('control-fluid')[0];\n    // initialize the uploader component\n    var uploadObj = new ej.inputs.Uploader({\n        maxFileSize: 104857600,\n        asyncSettings: {\n            saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n            removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove',\n            chunkSize: 500000\n        },\n        autoUpload: false,\n        removing: onFileRemove,\n        dropArea: dropElement,\n        chunkFailure: onBeforeFailure,\n        pausing: onPausing,\n        resuming: onResuming\n    });\n    uploadObj.appendTo('#fileupload');\n\n    var isInteraction = false;\n    // to update flag variable value for automatic pause and resume\n    function onPausing(args) {\n        if (args.event !== null && !navigator.onLine) {\n            isInteraction = true;\n        }\n        else {\n            isInteraction = false;\n        }\n    }\n    // to update flag variable for automatic pause and resume\n    function onResuming(args) {\n        if (args.event !== null && !navigator.onLine) {\n            isInteraction = true;\n        }\n        else {\n            isInteraction = false;\n        }\n    }\n\n    function onFileRemove(args) {\n        args.postRawFile = false;\n    }\n    // initialize dropdown component\n    var listObj = new ej.dropdowns.DropDownList({\n        // set the index value to select an item based on index at initial rendering\n        index: 0,\n        // set the placeholder to DropDownList input element\n        placeholder: 'Select chunk size',\n        // set the height of the popup element\n        popupHeight: '200px',\n        // bind the change event\n         change: function (e) {\n            uploadObj.asyncSettings.chunkSize = parseInt(e.itemData.value, 10);\n         }\n    });\n    listObj.appendTo('#chunk-sizes');\n    // to prevent triggering chunk-upload failure event and to pause uploading on network failure\n    function onBeforeFailure(args) {\n        args.cancel = !isInteraction;\n        var uploadObj = document.getElementById('fileupload').ej2_instances[0];\n        // interval to check network availability on every 500 milliseconds\n        var clearTimeInterval = setInterval(function () {\n            if (navigator.onLine && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 4) {\n                uploadObj.resume(uploadObj.filesData);\n                clearSetInterval();\n            }\n            else {\n                if (!isInteraction && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 3) {\n                    uploadObj.pause(uploadObj.filesData);\n                }\n            }\n        }, 500);\n        // clear Interval after when network is available.\n        function clearSetInterval() {\n            clearInterval(clearTimeInterval);\n        }\n    }\n"}