Your search did not match any results.

File Uploader - Chunk Uploading

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.

Backend API
@(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")) ) <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 ChunkUploading() { return View(); } [HttpPost] public ActionResult UploadChunk(HttpPostedFileBase file) { var chunkMetadata = Request.Form["chunkMetadata"]; try { if(!string.IsNullOrEmpty(chunkMetadata)) { var metaDataObject = JsonSerializer.Deserialize<ChunkMetadata>(chunkMetadata); // Write code that appends the 'file' file chunk to the temporary file. // You can use the $"{metaDataObject.FileGuid}.tmp" name for the temporary file. // Don't rely on or trust the FileName property without validation. if(metaDataObject.Index == metaDataObject.TotalCount - 1) { // Write code that saves the 'file' file. // Don't rely on or trust the FileName property without validation. } } } catch { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } return new EmptyResult(); } } }
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 }