Your search did not match any results.

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.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.NETCore.Demos.Models.FileUploader; using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System; using System.IO; using System.Linq; using System.Text.Json; namespace DevExtreme.NETCore.Demos.Controllers { public partial class FileUploaderController : Controller { public ActionResult ChunkUpload() { return View(); } [HttpPost] public ActionResult UploadChunk(IFormFile 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 BadRequest(); } return Ok(); } } }
using System; namespace DevExtreme.NETCore.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 }