Blazor File Upload Demo | Syncfusion Toolkit

Blazor Toolkit File Uploader Component

The File Uploader component allows users to upload files from local system to server or memory.

Disclaimer for all File Uploader samples: The backend service endpoints (saveUrl and removeUrl) used throughout this documentation for file saving and removing operations are intended for demonstration purposes only. The uploaded files are subjected to thorough validation, including verification of file names and the application of security checks. Therefore, this service is not recommended for production use, and the configuration of a custom backend save and remove service is strongly advised.

Basic

A simple uploader using async settings (save/remove endpoints).

Or drop files here

Preloaded files

The FileUpload component supports displaying a list of files that are already available on the server as UploadedFile. This is useful for editing scenarios where users need to see and potentially remove existing files before uploading new ones.

Or drop files here

Multiple files

Allows selection of multiple files in one operation.

Or drop files here

Auto upload

Automatically uploads files immediately after selection.

Or drop files here

Validation

Restrict file types and sizes using AllowedExtensions, MaxFileSize and MinFileSize.

Or drop files here

Allowed file types: PDF, PNG, Image

Minimum file size: 1 KB

Maximum file size: 10 MB

Chunk Upload

Chunk Upload in the Syncfusion Blazor File Upload component allows you to upload large files by splitting them into smaller, manageable chunks. This process significantly improves reliability, especially over unreliable networks, by reducing the impact of network interruptions. Additionally, the uploader provides inbuilt pause and resume functionality, enabling you to temporarily halt an ongoing chunk upload and resume it later from where it left off, giving you greater control over the upload process.

Or drop files here

Template

The File Upload component allows for the customization of the file list items by using a template.

Or drop files here

Events

Add the below sample code to explore the various events available in the File Uploader component.

Or drop files here

Drop Effect

The File Upload exposes a DropEffect property that controls the cursor feedback and allowed drop operation during drag-and-drop. Set this property to Default, Copy, Move, Link, or None.

Default:

Or drop files here

Copy:

Or drop files here

Move:

Or drop files here

Link:

Or drop files here

None:

Or drop files here