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.MVC.Demos.Models.FileManagement; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net; using System.Web; using System.Web.Http.Results; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public 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(HttpPostedFileBase file, string chunkMetadata) { var tempPath = Server.MapPath("~/Content/Files/"); // 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 new HttpStatusCodeResult(HttpStatusCode.BadRequest); } return new EmptyResult(); } 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 = Server.MapPath("~/Content/Files/"); System.IO.File.Copy(tempFilePath, Path.Combine(path, fileName)); } void AppendContentToFile(string path, HttpPostedFileBase content) { using(var stream = new FileStream(path, FileMode.Append, FileAccess.Write)) { content.InputStream.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 }