DxUpload.AllowedFileExtensions Property

Specifies file extensions that the Upload component accepts.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public List<string> AllowedFileExtensions { get; set; }

Property Value

Type	Description
List<String>	A list of allowed file extensions.

Remarks

File validation process depends on several API property values and includes the following steps:

1. A user selects files in the Open File dialog. The AcceptedFileTypes property value is passed to the accept attribute of the underlying input HTML element. The element applies the corresponding filter to the Open File dialog.

   

   If a user removes the filter, the Open File dialog displays all file types and users can select files that do not match AcceptedFileTypes.

   If a user drops files to the drop zone, this step is skipped.

2. If ValidateByAcceptedFileTypes is set to true, the component validates selected/dropped files against AcceptedFileTypes before adding them to the file list. If validation by MIME types fails, files are not added to the file list.

   If ValidateByAcceptedFileTypes is set to false, the component skips validation by MIME types and adds all selected files to the file list.

3. Once a file is added to the file list, the component validates if the file name extension is in AllowedFileExtensions. If validation fails, the Upload cannot upload this file and displays an error message.

   

The following table shows different combinations of AcceptedFileTypes, AllowedFileExtensions, and ValidateByAcceptedFileTypes properties:

ValidateBy AcceptedFileTypes	AcceptedFileTypes	AllowedFileExtensions	What’s Shown in File List	Upload Rule
True	.jpg, .png	.jpg, .pdf, .txt	.jpg, .png Only accepted types	.jpg Must match both file types and extensions
False	.jpg, .png	.jpg, .pdf, .txt	Any	.jpg, .pdf, .txt Only allowed extensions
True	.jpg, .png	Not set	.jpg, .png Only accepted types	.jpg, .png Only accepted types
False	.jpg, .png	Not set	Any	Any
True	Not set	.jpg, .pdf, .txt	Any	.jpg, .pdf, .txt Only allowed extensions
False	Not set	.jpg, .pdf, .txt	Any	.jpg, .pdf, .txt Only allowed extensions

Examples

Razor

<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/"
          AllowedFileExtensions="@(new List<string> { ".jpg", ".jpeg", ".gif", ".png" })">
</DxUpload>

UploadController

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace BlazorDemo.AspNetCoreHost;
[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase {
    [HttpPost("[action]")]
    public ActionResult Upload(IFormFile myFile) {
        try {
            // Write code that saves the 'myFile' file.
            // Don't rely on or trust the FileName property without validation.
        } catch {
            return BadRequest();
        }
        return Ok();
    }
}

Once a user selected or dropped a file, the Upload validates the file’s extension on the client. If the extension is not allowed, the Upload displays an error.

For more information on server-side validation, refer to Server-Side Validation.

Run Demo: Upload - Validation