File Uploader ▸ Validation

This demo shows how to use the allowedFileExtensions and maxFileSize properties to limit the maximum size and specify file extensions that the FileUploader accepts. Note that demonstrated validation is client-side — you should implement the server-side validation. You can see an example under the FileUploaderController tab.

Allowed file extensions: .jpg, .jpeg, .gif, .png.

Maximum file size: 4 MB.

<div class="main-block">
    <div class="file-uploader-block">
        @Html.AntiForgeryToken()
        @(Html.DevExtreme().FileUploader()
            .Name("imageFile")
            .Accept("*")
            .Multiple(true)
            .AllowedFileExtensions(new[] { ".jpg", ".jpeg", ".gif", ".png" })
            .UploadMode(FileUploadMode.UseButtons)
            .UploadUrl(Url.Action("UploadImage", "FileUploader"))
            .UploadCustomData(new { __RequestVerificationToken = new JS("document.getElementsByName('__RequestVerificationToken')[0].value") })
        )
        <span class="note">Allowed file extensions: <span>.jpg, .jpeg, .gif, .png</span>.</span>
    </div>
    <div class="file-uploader-block" style="float: right">
        @(Html.DevExtreme().FileUploader()
            .Name("smallFile")
            .Accept("*")
            .Multiple(true)
            .MaxFileSize(4000000)
            .UploadMode(FileUploadMode.UseButtons)
            .UploadUrl(Url.Action("UploadSmallFile", "FileUploader"))
            .UploadCustomData(new { __RequestVerificationToken = new JS("document.getElementsByName('__RequestVerificationToken')[0].value") })
        )
        <span class="note">Maximum file size: <span>4 MB.</span></span>
    </div>
</div>

using DevExtreme.MVC.Demos.Models.FileUploader;
using System;
using System.IO;
using System.Linq;
using System.Net;
using System.Text.Json;
using System.Web;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class FileUploaderController : Controller {

        public ActionResult Validation() {
            return View();
        }

    }
}

.file-uploader-block {
    width: 350px;
    float: left;
}

.note {
    font-size: 10pt;
    color: #484848;
    margin-left: 9px;
}

.note > span {
    font-weight: 700
}

.main-block {
    max-width: 900px;
    min-width: 700px;
}