File Uploader - Chunk Upload

This demo shows how to upload files in chunks. The chunkSize property specifies their size (in this case, 0.2MB). You should ensure the server can process chunks. See an example of the server implementation under the FileUploaderController tab in the ASP.NET MVC version of this demo.

Backend API

@Html.AntiForgeryToken() @(Html.DevExtreme().FileUploader() .ID("file-uploader") .Name("file") .Accept("image/*") .ChunkSize(200000) .AllowedFileExtensions(new[] { ".jpg", ".jpeg", ".gif", ".png" }) .MaxFileSize(4000000) .OnUploadStarted("onUploadStarted") .OnUploadError("onUploadError") .OnProgress("onUploadProgress") .UploadUrl(Url.Action("UploadChunk", "FileUploader")) .UploadCustomData(new { __RequestVerificationToken = new JS("document.getElementsByName('__RequestVerificationToken')[0].value") }) ) <span class="note">Allowed file extensions: <span>.jpg, .jpeg, .gif, .png</span>.</span> <span class="note">Maximum file size: <span>4 MB.</span></span> <div class="chunk-panel"> </div> <script> function onUploadProgress(e) { getChunkPanel().appendChild(addChunkInfo(e.segmentSize, e.bytesLoaded, e.bytesTotal)); } function onUploadStarted(e) { getChunkPanel().innerHTML = ''; } function onUploadError() { DevExpress.ui.dialog.alert("File is too large or not allowed file extension", "Error"); } function addChunkInfo(segmentSize, loaded, total) { var result = document.createElement("DIV"); result.appendChild(createSpan("Chunk size:")); result.appendChild(createSpan(getValueInKb(segmentSize), 'segment-size')); result.appendChild(createSpan(", Uploaded:")); result.appendChild(createSpan(getValueInKb(loaded), 'loaded-size')); result.appendChild(createSpan("/")); result.appendChild(createSpan(getValueInKb(total), 'total-size')); return result; } function getValueInKb(value) { return (value / 1024).toFixed(0) + "kb"; } function createSpan(text, className) { var result = document.createElement("SPAN"); if (className) result.className = className; result.innerText = text; return result; } function getChunkPanel() { return document.querySelector('.chunk-panel'); } </script>

using DevExtreme.MVC.Demos.Models.FileUploader; using System; using System.IO; using System.Linq; using System.Net; using System.Text.Json; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileUploaderController : Controller { public ActionResult ChunkUpload() { return View(); } } }

using System; namespace DevExtreme.MVC.Demos.Models.FileUploader { public class ChunkMetadata { public int Index { get; set; } public int TotalCount { get; set; } public int FileSize { get; set; } public string FileName { get; set; } public string FileType { get; set; } public Guid FileGuid { get; set; } } }

.chunk-panel { width: 505px; height: 165px; overflow-y: auto; padding: 18px; margin-top: 40px; background-color: rgba(191, 191, 191, 0.15); } .segment-size, .loaded-size { margin-left: 3px; color: var(--dx-color-primary); } .total-size { color: var(--dx-color-primary); } .note { display: block; font-size: 10pt; color: #484848; margin-left: 9px; } .note > span { font-weight: 700 }