Your search did not match any results.

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 + " dx-theme-accent-as-text-color"; result.innerText = text; return result; } function getChunkPanel() { return document.querySelector('.chunk-panel'); } </script>
using DevExtreme.NETCore.Demos.Models.FileManagement; using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public partial class FileUploaderController : Controller { 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 string FileGuid { get; set; } } public ActionResult ChunkUploading() { return View(); } [HttpPost] public ActionResult UploadChunk(IFormFile file, string chunkMetadata) { var tempPath = Path.Combine(_webHostEnvironment.WebRootPath, "uploads"); // Removes temporary files //RemoveTempFilesAfterDelay(tempPath, new TimeSpan(0, 5, 0)); try { if(!string.IsNullOrEmpty(chunkMetadata)) { var metaDataObject = JsonConvert.DeserializeObject<ChunkMetadata>(chunkMetadata); CheckFileExtensionValid(metaDataObject.FileName); // Uncomment to save the file //var tempFilePath = Path.Combine(tempPath, metaDataObject.FileGuid + ".tmp"); //if(!Directory.Exists(tempPath)) // Directory.CreateDirectory(tempPath); //AppendContentToFile(tempFilePath, file); //if(metaDataObject.Index == (metaDataObject.TotalCount - 1)) // ProcessUploadedFile(tempFilePath, metaDataObject.FileName); } } catch { return BadRequest(); } return Ok(); } void RemoveTempFilesAfterDelay(string path, TimeSpan delay) { var dir = new DirectoryInfo(path); if(dir.Exists) foreach(var file in dir.GetFiles("*.tmp").Where(f => f.LastWriteTimeUtc.Add(delay) < DateTime.UtcNow)) file.Delete(); } void CheckFileExtensionValid(string fileName) { fileName = fileName.ToLower(); string[] imageExtensions = { ".jpg", ".jpeg", ".gif", ".png" }; var isValidExtenstion = imageExtensions.Any(ext => { return fileName.LastIndexOf(ext) > -1; }); if(!isValidExtenstion) throw new Exception("Not allowed file extension"); } void CheckMaxFileSize(FileStream stream) { if(stream.Length > 4000000) throw new Exception("File is too large"); } void ProcessUploadedFile(string tempFilePath, string fileName) { // Check if the uploaded file is a valid image var path = Path.Combine(_webHostEnvironment.WebRootPath, "uploads"); System.IO.File.Copy(tempFilePath, Path.Combine(path, fileName)); } void AppendContentToFile(string path, IFormFile content) { using(var stream = new FileStream(path, FileMode.Append, FileAccess.Write)) { content.CopyTo(stream); CheckMaxFileSize(stream); } } } }
.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; } .note { display: block; font-size: 10pt; color: #484848; margin-left: 9px; } .note > span { font-weight: 700 }