@(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
}