DxUpload.AcceptedFileTypes Property

Filters files in the Open File dialog and specifies MIME types that the Upload component can upload.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

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

Property Value

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

Remarks

You can use the following APIs to specify file types and extensions accepted by Upload.

Open File Dialog Filter

The AcceptedFileTypes property sets the file type filter in the Open File dialog. The property value is passed to the accept attribute of the underlying input HTML element.

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

A user can also skip the Open File dialog and simply drop files onto the drop zone.

File Type Validation

Once a file is added to the file list, the component validates the following:

• Whether the file MIME type is in AcceptedFileTypes. To skip MIME type validation, set ValidateByAcceptedFileTypes to false.
• Whether the file name extension is in AllowedFileExtensions.

If validation fails, the Upload cannot upload the file and displays an error message.

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