DxFileInput.AcceptedFileTypes Property

Specifies MIME types that users can select in the Open File dialog to add them to the file list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

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

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 File Input 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

Example

The AcceptedFileTypes property allows you to specify file types in the following formats: "image/*", "image/png", "video/*", "video/mp4", and so on.

The following example allows users to upload image and PDF files:

<DxFileInput FilesUploading="OnFilesUploading"
             AcceptedFileTypes="@(new List<string> { "image/*", "application/pdf"})"/>

@code {
    async Task OnFilesUploading(FilesUploadingEventArgs args) {
        foreach (var file in args.Files) {
            /* The following code is intended for demonstration purposes only.
            Do not read a stream directly in memory to avoid performance and security-related issues. */
            using var stream = new System.IO.MemoryStream();
            await file.OpenReadStream(file.Size).CopyToAsync(stream);
        }
    }
}