DxUpload.AcceptedFileTypes Property

Specifies MIME types that users can select in the Open File dialog to add 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 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

You can specify file types in the following formats: "image/*", "image/png", "video/*", "video/mp4", and so on.

• Specify the file type (image, video, audio, etc.)

  <DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/"
            AcceptedFileTypes="@(new List<string> { "image/*"})">
  </DxUpload>
  

  

• Specify multiple file types.

  <DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/"
            AcceptedFileTypes="@(new List<string> { "image/*", "video/*"})">
  </DxUpload>
  

  

• Specify one or more file extensions in the “type/subtype“ format.

  <DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/"
            AcceptedFileTypes="@(new List<string> { "image/png"})">
  </DxUpload>
  

  

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

Run Demo: Upload - Validation