DxUpload.AcceptedFileTypes Property

Specifies one or multiple MIME types that the Upload component accepts.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
List<String>

A list of allowed MIME file types.

Remarks

Use the AcceptedFileTypes property to specify file types that users can select in the Open File dialog and/or drop onto the drop zone. This property value is passed to the accept attribute of the underlying HTML input element. See MIME types for more information about available file types.

You can set this property in the following ways:

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

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

    Upload - The Image file type

  • Specify multiple file types.

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

    Upload - Custom file types

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

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

    Upload - The PNG file type

Use the AllowedFileExtensions property instead if you want to restrict file extensions but do not want to filter the Open File dialog. In this case, the Upload validates files once a user selects or drops them and displays errors if file extensions are not allowed.

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

Run Demo: Upload - Validation

See Also