Skip to content

Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md , chunk-upload.md ,http-client.md) #7208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nagasiddarthak wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md , chunk-upload.md ,http-client.md) #7208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
387abe5
Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md)
PriyankaKarthikeyan1408 Nov 26, 2025
e9d39e4
Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md)
PriyankaKarthikeyan1408 Nov 27, 2025
cadc3aa
Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md)
PriyankaKarthikeyan1408 Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
542 changes: 391 additions & 151 deletions blazor/file-upload/async.md
View file
Open in desktop

Large diffs are not rendered by default.

456 changes: 288 additions & 168 deletions blazor/file-upload/chunk-upload.md
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions blazor/file-upload/file-upload-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The Syncfusion Blazor FileUpload component offers a wide range of properties to

The [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ID) property is used to provide a unique identifier for the FileUpload component. This is useful for referencing the component in JavaScript or CSS, and for ensuring accessibility.

## Code Example
### Code Example

```cshtml
<SfUploader ID="myFileUploadComponent" name="UploadFiles" />
Expand All @@ -31,7 +31,7 @@ The [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUplo

The [`AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions)property specifies the file types that can be uploaded. This is crucial for validating user uploads and ensuring only acceptable file formats are accepted.

## Code Example
### Code Example

```cshtml
<SfUploader AllowedExtensions=".jpg,.jpeg,.png,.gif" />
Expand All @@ -47,7 +47,7 @@ The [`AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo

The [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) property determines whether the user can select multiple files for upload at once. Set to `true` for scenarios where multiple documents or images need to be uploaded simultaneously.

## Code Example
### Code Example

```cshtml
<SfUploader AllowMultiple="true" />
Expand All @@ -63,7 +63,7 @@ The [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.In

The [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property controls whether files are uploaded immediately after selection. Set to `true` for instant uploads, useful for quick submissions.

## Code Example
### Code Example

```cshtml
<SfUploader AutoUpload="true" />
Expand All @@ -79,7 +79,7 @@ If [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs

The [`SequentialUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_SequentialUpload)property, when [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) is `true`, specifies whether selected files should be uploaded one after another or concurrently. Use `true` for sequential processing, which can be useful for server resource management.

## Code Example
### Code Example

```cshtml
<SfUploader AllowMultiple="true" SequentialUpload="true" />
Expand All @@ -95,7 +95,7 @@ The [`SequentialUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor

The [`DirectoryUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_DirectoryUpload) property enables users to select and upload an entire directory instead of individual files. This is useful for uploading complex folder structures.

## Code Example
### Code Example

```cshtml
<SfUploader DirectoryUpload="true" />
Expand All @@ -111,7 +111,7 @@ The [`DirectoryUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.

The [`Enabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_Enabled) property controls whether the FileUpload component is interactive or disabled. This is useful for temporarily preventing file uploads, for example, until certain form conditions are met.

## Code Example
### Code Example

```cshtml
<SfUploader Enabled="false" />
Expand All @@ -127,7 +127,7 @@ The [`Enabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.S

The [`MaxFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize) property sets the maximum allowable size for a single file upload in bytes. This helps prevent excessively large files from being uploaded, which can impact server performance or storage.

## Code Example
### Code Example

```cshtml
<SfUploader MaxFileSize="5242880" /> @* 5 MB *@
Expand All @@ -144,7 +144,7 @@ The [`MaxFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu

The [`MinFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize) property sets the minimum allowable size for a single file upload in bytes. This can be used to prevent the upload of empty or insignificant files.

## Code Example
### Code Example

```cshtml
<SfUploader MinFileSize="1024" /> @* 1 KB *@
Expand All @@ -158,7 +158,7 @@ The [`MinFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu

The [`EnableHtmlSanitizer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnableHtmlSanitizer) property, when set to `true`, sanitizes the file names to remove potentially harmful HTML content. This is a security measure to prevent cross-site scripting (XSS) attacks through malicious file names.

## Code Example
### Code Example

```cshtml
<SfUploader EnableHtmlSanitizer="true" />
Expand All @@ -172,7 +172,7 @@ The [`EnableHtmlSanitizer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla

The [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnablePersistence) property, when `true`, allows the component's state (e.g., uploaded files list) to be maintained even after a page reload. This improves user experience by preserving progress.

## Code Example
### Code Example

```cshtml
<SfUploader EnablePersistence="true" ID="UploadFiles" >
Expand All @@ -187,7 +187,7 @@ The [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo

The [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnableRtl) property enables Right-to-Left (RTL) rendering for cultures that read from right to left. This is important for internationalization and accessibility.

## Code Example
### Code Example

```cshtml
<SfUploader EnableRtl="true" />
Expand All @@ -201,7 +201,7 @@ The [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs

The [`HtmlAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property allows you to add custom HTML attributes to the root element of the FileUpload component. This is useful for applying custom styling, data attributes, or other HTML properties not directly exposed as Blazor parameters.

## Code Example
### Code Example

```cshtml
<SfUploader HtmlAttributes="@(new Dictionary<string, object>() { { "data-custom-attribute", "fileupload-data" }, { "class", "my-custom-uploader" } })" />
Expand All @@ -217,7 +217,7 @@ The [`HtmlAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I

The [`InputAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_InputAttributes) property allows you to add custom HTML attributes specifically to the underlying `input type="file"` element within the FileUpload component. This is useful for applying browser-specific input attributes or custom event handlers.

## Code Example
### Code Example

```cshtml
<SfUploader InputAttributes="@(new Dictionary<string, object>() { { "accept", "image/*" } })" />
Expand All @@ -233,7 +233,7 @@ The [`InputAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.

The [`TabIndex`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_TabIndex) property specifies the tab order of the FileUpload component relative to other focusable elements on the page. This is important for keyboard navigation and accessibility.

## Code Example
### Code Example

```cshtml
<input type="text" TabIndex="1" /><br />
Expand All @@ -250,7 +250,7 @@ The [`TabIndex`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.

The FileUpload component supports displaying a list of files that are already available on the server as ["UploaderUploadedFiles"](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderUploadedFiles.html#properties) files. This is useful for editing scenarios where users need to see and potentially remove existing files before uploading new ones.

## Code Example
### Code Example

```cshtml
<SfUploader>
Expand Down
14 changes: 1 addition & 13 deletions blazor/file-upload/file-upload-methods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

This section details the various methods available to interact with and manage the Syncfusion Blazor File Upload component programmatically.

### GetFileDetails
## GetFileDetails

The [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) method retrieves the details of all files currently selected or uploaded in the File Upload component. This is useful for validating file properties like size, type, and name before or after the upload process.

Expand Down Expand Up @@ -61,8 +61,6 @@ The [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I

{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLetYVyVNjMlOlP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor FileUpload GetFileDetails Method](./images/blazor-fileupload-getfiledetails.gif)


## GetFilesDataAsync

Expand Down Expand Up @@ -103,8 +101,6 @@ The [`GetFilesDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo

{% previewsample "https://blazorplayground.syncfusion.com/embed/LthoZYLzypWUmzGy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor FileUpload GetFilesDataAsync Method](./images/blazor-fileupload-getfilesdataasync.gif)

## UploadAsync

The [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) method programmatically initiates the upload process for all selected files in the File Upload component. This method is particularly useful when [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is set to `false`, allowing the user to trigger the upload manually at a specific time, such as after reviewing their selections.
Expand Down Expand Up @@ -133,8 +129,6 @@ The [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu

{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBeXYVTezyQELFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor FileUpload UploadAsync Method](./images/blazor-fileupload-uploadasync.gif)

## CancelAsync

The [`CancelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CancelAsync_Syncfusion_Blazor_Inputs_FileInfo___) method allows you to programmatically cancel the upload of a specific file or all ongoing uploads within the File Upload component. This is useful for providing users with the ability to stop an upload that is in progress, for example, if they selected the wrong file or decide not to proceed.
Expand Down Expand Up @@ -167,8 +161,6 @@ The [`CancelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu

{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSNkBzSzuxWFbi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor FileUpload CancelAsync Method](./images/blazor-fileupload-cancelasync.gif)

## ClearAllAsync

The [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) method allows you to programmatically clear all selected or uploaded files from the File Upload component's internal list and UI. This is useful for resetting the component and preparing it for a new selection of files, or for cleaning up after a successful (or failed) upload operation.
Expand Down Expand Up @@ -197,8 +189,6 @@ The [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.In

{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVItErIihaDlaeE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor FileUpload ClearAllAsync Method](./images/blazor-fileupload-clearallasync.gif)

## RemoveAsync

The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) method allows you to programmatically remove a specific file from the File Upload component's display and internal tracking. This method is particularly useful when you need to enable users to delete individual files from the list of selected files before or after upload, or as part of a post-upload management process.
Expand Down Expand Up @@ -235,5 +225,3 @@ The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu
> **Note:** The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) method typically requires the fileInfo[] of the file you wish to remove. If [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) is configured in [`UploaderAsyncSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html), calling [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) will also trigger a server-side call to the specified [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) to handle server-side file deletion. If no [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) is configured, [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) will only remove the file from the client-side component.

{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhSjYreMJJIqYvz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor FileUpload RemoveAsync Method](./images/blazor-fileupload-removeasync.gif)
14 changes: 0 additions & 14 deletions blazor/file-upload/getting-started-with-maui-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,12 +176,6 @@ N> If you encounter any errors while using the Android Emulator, refer to the fo

{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %}

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in your default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %}

![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif)

## Use ValueChange Event

The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint.
Expand Down Expand Up @@ -241,8 +235,6 @@ N> When saving files directly in a Blazor Server application using [`ValueChange

{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif)


## Memory stream

Expand Down Expand Up @@ -313,8 +305,6 @@ N> When using `MemoryStream` for large files, be mindful of server memory consum

{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif)


## Created Event

Expand Down Expand Up @@ -354,8 +344,6 @@ N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Input

{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor File Upload Created Example](images/blazor-fileupload-created.gif)


## File Selected Event

Expand Down Expand Up @@ -409,8 +397,6 @@ N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the fil

{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif)


## OnFileListRender

Expand Down
Loading