Back to Devexpress

DxFileInput.AllowedFileExtensions Property

blazor-devexpress-dot-blazor-dot-dxfileinput-45867c7d.md

latest2.9 KB
Original Source

DxFileInput.AllowedFileExtensions Property

Specifies file extensions that the File Input component can upload.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

TypeDescription
List<String>

A list of allowed file extensions.

|

Remarks

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

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:

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

Example

The following example allows users to upload PNG, JPG, and PDF files:

razor
<DxFileInput FilesUploading="OnFilesUploading"
             AllowedFileExtensions="@(new List<string> { ".png", ".jpg", ".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);
        }
    }
}

See Also

DxFileInput Class

DxFileInput Members

DevExpress.Blazor Namespace