Note: Before adding file upload capabilities to your Blazor app, make certain to institute necessary security-related processes (to avoid risks and control unauthorized file operations).

DevExpress Blazor UI Component Library includes two components that allow you to handle file upload: DxUpload and DxFileInput. Both these components allow you to upload files to a server, send them to another destination, or save them to the file system. The key difference between these components is that the Upload component requires creating a separate web API controller to upload files, while the File Input component gives you direct and secure access to selected files in Razor code.

With the File Input component, users can select files in the Open File dialog or drag and drop files onto the drop zone. The FilesUploading event occurs once an upload operation begins. Handle this event to access the selected files and call a file's OpenReadStream method to read file content.

This demo implements an external Select File button and a drop zone container for the File Input component. When the file list is empty, the File Input component is hidden. To customize the component's appearance and behavior, the demo uses the following API members:

• Visible — Specifies whether the component is visible.
• SelectedFilesChanged — Fires when the file list changes.
• ExternalSelectButtonCssSelector — Specifies the CSS selector of a button or HTML element that invokes the Open File dialog.
• ExternalDropZoneCssSelector — Specifies the CSS selector of a container or HTML element where to drop the files.
• ExternalDropZoneDragOverCssClass — Specifies the CSS class applied to the drop zone when users drag files over it.

In this demo, the File Input component allows you to select a JPG, JPEG, GIF, or PNG image (up to 15MB in size). The FilesUploading event handler uploads the selected image directly to the web page and displays it in the drop zone container.

In this demo, users can upload multiple files simultaneously. Set the AllowMultiFileUpload property to true to enable this behavior.

Use the UploadMode property to specify how the File Input component uploads files:

• Instant (Default) — The component starts uploading a file once a user selects or drops it.
• OnButtonClick — The component starts uploading a file once a user clicks an upload button.

In this demo, the File Input component uses OnButtonClick upload mode.