@(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 DevExtreme.MVC.Demos.Models.FileUploader;
using Newtonsoft.Json;
using System;
using System.IO;
using System.Linq;
using System.Net;
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 = JsonConvert.DeserializeObject<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;
}
.note {
display: block;
font-size: 10pt;
color: #484848;
margin-left: 9px;
}
.note > span {
font-weight: 700
}