Free Trial Buy
    Your search did not match any results.

    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.

    See more Hide details
    Prev Demo Next Demo
    Backend API
    <div class="main-block"> <div class="file-uploader-block"> @(Html.DevExtreme().FileUploader() .Name("imageFile") .Accept("*") .Multiple(true) .AllowedFileExtensions(new[] { ".jpg", ".jpeg", ".gif", ".png" }) .UploadMode(FileUploadMode.UseButtons) .UploadUrl(Url.Action("UploadImage", "FileUploader")) ) <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")) ) <span class="note">Maximum file size: <span>4 MB.</span></span> </div> </div>
    using DevExtreme.NETCore.Demos.Models.FileManagement; using DevExtreme.NETCore.Demos.Models.FileUploader; using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.IO; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public partial class FileUploaderController : Controller { const long MaxFileSize = 4_000_000; string[] ImageExtensions = { ".JPG", ".JPEG", ".GIF", ".PNG" }; public ActionResult Validation() { return View(); } [HttpPost] public ActionResult UploadImage(IFormFile imageFile) { try { var extension = Path.GetExtension(imageFile.FileName).ToUpperInvariant(); var isValidExtenstion = ImageExtensions.Contains(extension); if(!isValidExtenstion) { throw new InvalidOperationException(); } // Write code that saves the 'imageFile' file. // Don't rely on or trust the FileName property without validation. } catch { return BadRequest(); } return Ok(); } [HttpPost("action")] public ActionResult UploadSmallFile(IFormFile smallFile) { try { var isValidSize = smallFile.Length <= MaxFileSize; if(!isValidSize) { throw new InvalidOperationException(); } // Write code that saves the 'smallFile' file. // Don't rely on or trust the FileName property without validation. } catch { return BadRequest(); } return Ok(); } } }
    .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; }