DxFileInput.FilesUploading Event

Allows you to upload selected files.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<FilesUploadingEventArgs> FilesUploading { get; set; }

Event Data

The FilesUploading event's data class is FilesUploadingEventArgs. The following properties provide information specific to this event:

Property	Description
Files	Provides access to objects that store information about files and allow you to access file contents.

Remarks

The File Input component does not upload selected files automatically. Instead, the component raises the FilesUploading event once you or users start (or restart) an upload operation.

Handle the FilesUploading event to access selected Files and call a file’s OpenReadStream method to read file content. Once the read operation is completed, you can send the file to another destination, save it to the file system, or display file content on a web page.

Note

Do not read a stream directly in memory to avoid performance and security-related issues. Instead, copy the stream to a file on a disk or pass file content to an external service.

The following example reads contents of uploaded files:

<DxFileInput FilesUploading="OnFilesUploading" />

@code {
    async Task OnFilesUploading(FilesUploadingEventArgs args) {
        foreach (var file in args.Files) {
            try {
                /* 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);
            }
            catch (OperationCanceledException ex) {
                // Handle the cancel action here
            }
        }
    }
}

Run Demo: File Input - Overview

Based on the render mode, the File Input component streams file content in one of the following ways:

• In Interactive WebAssembly mode, the component streams file data directly to razor code in the user browser.
• In Interactive Server mode, the component streams file data from the client over the SignalR connection to the server’s razor code.

If you use the ReadAsync method to read stream content, note that this method may read fewer bytes than requested. To ensure correct read operations, call the ReadAsync method within the while loop as follows:

async Task OnFilesUploading(FilesUploadingEventArgs args) {
    foreach (var file in args.Files){
        int fileSize = (int)file.Size;
        Stream stream = file.OpenReadStream(fileSize);
        try {
            int totalBytesRead = 0;
            int bytesReadCount = 0;
            byte[] FileBytes = new byte[fileSize];
            do {
                bytesReadCount = await stream.ReadAsync(FileBytes, totalBytesRead, fileSize - totalBytesRead);
                totalBytesRead += bytesReadCount;
            } while (bytesReadCount != 0);
        }
        finally {
            stream?.Close();
        }
    }
}