From 387abe53d1e38e2203c27235b1bb4e2f915692ab Mon Sep 17 00:00:00 2001 From: PriyankaKarthikeyan14 Date: Wed, 26 Nov 2025 17:13:23 +0530 Subject: [PATCH 1/3] Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md) --- blazor/file-upload/async.md | 542 ++++++++++++++++++++++++++---------- 1 file changed, 391 insertions(+), 151 deletions(-) diff --git a/blazor/file-upload/async.md b/blazor/file-upload/async.md index cefcb56341..80d5872417 100644 --- a/blazor/file-upload/async.md +++ b/blazor/file-upload/async.md @@ -9,43 +9,34 @@ documentation: ug # Asynchronous Upload in Blazor File Upload Component -The uploader component allows you to upload the files asynchronously. The upload process requires save and remove action URL to manage the upload process in the server. -* The save action is necessary to handle the upload operation. -* The remove action is optional, one can handle the removed files from server. +The Uploader component allows you to upload files asynchronously. The upload process requires [`SaveUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) and [`RemoveUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) to manage the upload process on the server. +* The [`SaveUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) is necessary to handle the upload operation. +* The [`RemoveUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) is optional; it handles files removed from the server. -N>The name attribute must match the name of a parameter in the POST method. For more information, refer [here](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-8.0#match-name-attribute-value-to-parameter-name-of-post-method). The name attribute is automatically generated from the control’s ID property. If the name attribute differs from the ID property, then you can use the htmlAttributes property to set the name attribute directly to the input element. For more information refer [here](./how-to/html-attributes). +>The `name` attribute in the generated HTML input element for the Uploader must match the name of the parameter in the server-side POST method. For more information, refer [here](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-8.0#match-name-attribute-value-to-parameter-name-of-post-method). The `name` attribute is automatically generated from the control’s `ID` property. If the desired `name` attribute differs from the `ID` property, you can use the `htmlAttributes` property to set the `name` attribute directly to the input element. For more information, refer [here](./how-to/html-attributes). -The file can be uploaded automatically or manually. For more information, you can refer to the [Auto Upload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) section from the documentation. +Files can be uploaded automatically or manually. For more information, you can refer to the [Auto Upload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) section in the documentation. -## Multiple file upload +## With server-side API endpoint -By Default, the uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking clear button that is shown in footer. You can add multiple attributes to the original input element of file by enabling the multiple file selection. The following example explains about [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file upload settings. The [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Progressing) event is triggered during the file uploading process. - -### With server-side API endpoint - -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +[`SaveUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) and [`RemoveUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). ```cshtml @using Syncfusion.Blazor.Inputs - + - -@code { - private void ProgressingHandler(Syncfusion.Blazor.Inputs.ProgressEventArgs args) - { - // Here, you can customize your code. - } -} ``` -### Without server-side API endpoint +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBSWWBdJDLpZIrg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Without server-side API endpoint ```cshtml @using Syncfusion.Blazor.Inputs - + @code { private async Task OnChange(UploadChangeEventArgs args) @@ -65,227 +56,476 @@ By Default, the uploader component allows you to select and upload multiple file Console.WriteLine(ex.Message); } } - private void ProgressingHandler(Syncfusion.Blazor.Inputs.ProgressEventArgs args) - { - // Here, you can customize your code. - } } ``` -## Single file upload +## Backend Configuration -You can select and upload a single file by disabling the [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file selection property. The file list item is removed for every selection and it always maintain a single file to upload. You can remove multiple attributes from the original input element of file by enabling the single file upload property. +### With server-side API endpoint -The following example explains about single file upload settings. +The upload process requires save and remove action URL to manage the upload process in the server. -### With server-side API endpoint +N> * The save action is necessary to handle the upload operation. +
* The remove action is optional, one can handle the removed files from server. -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. -```cshtml -@using Syncfusion.Blazor.Inputs +The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. - - - - -``` +The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. -### Without server-side API endpoint +{% tabs %} +{% highlight cshtml %} -```cshtml -@using Syncfusion.Blazor.Inputs - - - -@code { - private async Task OnChange(UploadChangeEventArgs args) +[Route("api/[controller]")] + +private IHostingEnvironment hostingEnv; + +public SampleDataController(IHostingEnvironment env) +{ + this.hostingEnv = env; +} + +[HttpPost("[action]")] +public void Save(IList UploadFiles) +{ + long size = 0; + try { - try + foreach (var file in UploadFiles) { - foreach (var file in args.Files) + var filename = ContentDispositionHeaderValue + .Parse(file.ContentDisposition) + .FileName + .Trim('"'); + filename = hostingEnv.ContentRootPath + $@"\{filename}"; + size += (int)file.Length; + if (!System.IO.File.Exists(filename)) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + using (FileStream fs = System.IO.File.Create(filename)) + { + file.CopyTo(fs); + fs.Flush(); + } } } - catch (Exception ex) + } + catch (Exception e) + { + Response.Clear(); + Response.StatusCode = 204; + Response.HttpContext.Features.Get().ReasonPhrase = "File failed to upload"; + Response.HttpContext.Features.Get().ReasonPhrase = e.Message; + } +} +[HttpPost("[action]")] +public void Remove(IList UploadFiles) +{ + try + { + var filename = hostingEnv.ContentRootPath + $@"\{UploadFiles[0].FileName}"; + if (System.IO.File.Exists(filename)) { - Console.WriteLine(ex.Message); + System.IO.File.Delete(filename); } } + catch (Exception e) + { + Response.Clear(); + Response.StatusCode = 200; + Response.HttpContext.Features.Get().ReasonPhrase = "File removed successfully"; + Response.HttpContext.Features.Get().ReasonPhrase = e.Message; + } } -``` -## Auto upload +{% endhighlight %} +{% endtabs %} -By default, the uploader processes the files to upload once the files are selected and added in upload queue. To upload manually, disable the [AutoUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property. When you disable this property, you can use the action buttons to call upload all or clear all actions manually. You can change those buttons text using the [Buttons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_Buttons) property in Uploader component. [OnClear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnClear) event triggers before clearing the items in file list when clicking “clear”. +{% tabs %} +{% highlight razor %} -### With server-side API endpoint + + + + +{% endhighlight %} +{% endtabs %} + +> Replace api/SampleData/Save and api/SampleData/Remove with your backend routes. Incorrect SaveUrl/RemoveUrl will trigger Failure events. + +## Events + +The Syncfusion File Upload component provides several events to help you control and customize the upload process. Below is detailed documentation for each event including their usage scenarios and sample code. + +### BeforeUpload + +**Description:** Triggered before the upload process begins. This event is used to add additional parameters with upload requests or to cancel the upload process. + +**Usage Scenarios:** -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +- Add headers or extra parameters to the upload request +- Validate files before upload +- Prevent specific files from being uploaded ```cshtml -@using Syncfusion.Blazor.Inputs + + + + - - - - +@code { + private void BeforeUploadHandler(BeforeUploadEventArgs args) + { + // To prevent the default upload + args.Cancel = true; + + // Or add custom data with the upload request + args.CustomFormData = new List { new { Name = "Syncfusion" } }; + } +} +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVeCiVoAGUKZnZb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### OnUploadStart + +**Description**: Triggers when the upload process starts. This event can be used to add additional parameters with upload requests or convert files to a specific format. + +**Usage Scenarios:** + +- Convert files to byte arrays before uploading to a database +- Add custom headers +- Track upload start time for analytics + +```cshtml + + + +@statusMessage @code { - private void OnClearHandler(ClearingEventArgs args) + private string statusMessage = "Waiting for upload..."; + private void UploadStartHandler(UploadingEventArgs args) { - // Here, you can customize your code. + statusMessage = $"Upload started for file: {args.FileData.Name}"; } + } ``` -### Without server-side API endpoint +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBeWMBIUlraMdku?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Progressing + +**Description:** Triggers when uploading a file to the server using AJAX requests. Provides real-time progress information during file upload. + +**Usage Scenarios:** + +- Show custom progress UI +- Calculate upload speed +- Display remaining time estimation ```cshtml -@using Syncfusion.Blazor.Inputs - - + + + + +@if (!string.IsNullOrEmpty(progressText)) +{ +

@progressText

+} + @code { - private async Task OnChange(UploadChangeEventArgs args) + private SfUploader? uploader; + private string progressText = ""; + + private void ProgressHandler(Syncfusion.Blazor.Inputs.ProgressEventArgs args) { - try + if (args.LengthComputable && args.Total > 0) { - foreach (var file in args.Files) - { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); - } + var percent = (int)((args.Loaded / args.Total) * 100); + progressText = $"Uploading {args.File?.Name}: {percent}% completed"; + StateHasChanged(); } - catch (Exception ex) + else { - Console.WriteLine(ex.Message); + progressText = $"Uploading {args.File?.Name}: progress unknown"; } } - private void OnClearHandler(ClearingEventArgs args) +} +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZreCWBeTZzShNnS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### OnActionComplete + +**Description**: Triggers after all selected files have been processed for upload, either successfully or failed to the server. + +**Usage Scenarios:** + +- Display upload summary +- Perform post-upload processing +- Navigate to another page after upload completes + +```cshtml +@using Syncfusion.Blazor.Inputs + +

File Upload with ActionComplete Event

+ + + + + + +@if (!string.IsNullOrEmpty(actionMessage)) +{ +

@actionMessage

+} + +@code { + private SfUploader? uploader; + private string actionMessage = ""; + private void ActionCompleteHandler(Syncfusion.Blazor.Inputs.ActionCompleteEventArgs args) { - // Here, you can customize your code. + // "2" = success (string) + bool allSuccess = args.FileData.All(file => file.StatusCode == "2"); + actionMessage = allSuccess + ? "✅ All files uploaded successfully!" + : $"❌ Failed files: {string.Join(", ", args.FileData.Where(f => f.StatusCode != "2").Select(f => f.Name))}"; + StateHasChanged(); } } + ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhyCirozVBSfKLa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Auto Uploading File in Blazor FileUpload](./images/blazor-fileupload-with-auto-upload-file.png) +### Success +**Description**: The Success event is triggered only after a file has been uploaded successfully. -![Failing Auto Upload File in Blazor Upload](./images/blazor-fileupload-failed-auto-upload-file.png) +**Usage Scenarios:** -## Sequential upload +- Display success messages +- Process server response +- Update UI with uploaded file information -By default, the uploader component process multiple files to upload simultaneously. When you enable the [SequentialUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_SequentialUpload) property, the selected files will process sequentially (one after the other) to the server. If the file uploaded successfully or failed, the next file will upload automatically in this sequential upload. This feature helps to reduce the upload traffic and reduce the failure of file upload. +```cshtml + + + + -### With server-side API endpoint +@if (!string.IsNullOrEmpty(successMessage)) +{ +

@successMessage

+} + +@code { + private string successMessage = ""; + + private void SuccessHandler(SuccessEventArgs args) + { + successMessage = $"✅ File '{args.File.Name}' uploaded successfully!"; + StateHasChanged(); + } +} +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLoCCBSTgJSDCIc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} + +### OnFailure + +- The OnFailure event is triggered only when a file upload fails (e.g., due to an incorrect SaveUrl). -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +**Usage Scenarios:** + +- Display detailed error message +- Retry failed uploads +- Log failures ```cshtml -@using Syncfusion.Blazor.Inputs - - - + + + + +@if (!string.IsNullOrEmpty(FailureMessage)) +{ +

@FailureMessage

+} + +@code { + private string FailureMessage = ""; + private void OnFailure(Syncfusion.Blazor.Inputs.FailureEventArgs args) + { + // Show error message from args.Response + FailureMessage = $"❌ File '{args.File.Name}' uploaded Failed!"; + StateHasChanged(); + } +} ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrSiWrIJpNySjIM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### OnCancel + +**Description**: Triggers when the user cancels an in-progress file upload. + +**Usage Scenarios:** -### Without server-side API endpoint +- Update the UI to indicate that the upload was canceled +- Log cancellation for auditing or analytics +- Notify the user about the cancellation ```cshtml -@using Syncfusion.Blazor.Inputs - - + + + + -@code { - private async Task OnChange(UploadChangeEventArgs args) - { - try - { - foreach (var file in args.Files) - { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); - } - } - catch (Exception ex) + +
+

Upload Status

+
    + @foreach (var message in cancelMessages) { - Console.WriteLine(ex.Message); +
  • @message
    • } +
+
+ +@code { + private List cancelMessages = new List(); + + private void OnCancel(CancelEventArgs args) + { + // Track cancellation and update UI + var msg = $"Upload canceled for file {args.FileData.Name}"; + cancelMessages.Add(msg); + + // Optional: Log or clean up resources + Console.WriteLine(msg); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLSWsLngIuAERjF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Preloaded files +### OnClear -The uploader component allows you to pre-load the list of files that are uploaded in the server. The preloaded files are useful to view and remove the files from server that can be achieved by the [Files](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_Files) property. By default, the files are configured with uploaded successfully state on rendering file list. The following properties are mandatory to configure the preloaded files: +**Description:** -* Name -* Size -* Type +The OnClear event is triggered when the file list in the uploader is cleared (either by the user or programmatically). This event can be used to reset UI state, release resources, or log the action. -### With server-side API endpoint +**Usage Scenarios:** -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +- Reset UI elements to default state +- Clear any temporary data or cached files +- Log the clear action for auditing +- Notify the user that the file list has been cleared ```cshtml -@using Syncfusion.Blazor.Inputs - - - - - - - - + + + + +
+

Upload Status

+

@clearMessage

+
+ +@code { + private string clearMessage = string.Empty; + + private void OnClearHandler(ClearingEventArgs args) + { + // Update UI when files are cleared + clearMessage = "All files have been cleared from the uploader."; + + // Optional: Log or clean up resources + Console.WriteLine("Uploader file list cleared."); + } +} + ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhoCiVdgQLbOfil?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### BeforeRemove + +**Description**: Triggers before sending a remove request. Allows cancellation. + +**Usage Scenarios:** -### Without server-side API endpoint +- Confirm deletion +- Prevent removal of critical files ```cshtml -@using Syncfusion.Blazor.Inputs - - - - - - - + + + + + @code { - private async Task OnChange(UploadChangeEventArgs args) + private void BeforeRemove(BeforeRemoveEventArgs args) { - try + // Example: Ask for confirmation before removing + if (!ConfirmRemove(args.FilesData[0].Name)) { - foreach (var file in args.Files) - { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); - } - } - catch (Exception ex) - { - Console.WriteLine(ex.Message); + args.Cancel = true; // Prevent removal } } + + private bool ConfirmRemove(string fileName) + { + // Custom logic: return false if user cancels + return false; // For now, always allow + } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVoWsVdqFwdMHay?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### OnRemove + +**Description**: OnRemove triggers when the remove action is initiated—after confirmation and just before the remove request is sent to the server. It’s useful for tracking removal actions, updating UI states, or performing custom logic before the actual removal occurs. + +**Usage Scenarios** +- Show which files are being removed in real-time. +- Track user behavior for file removal actions. -![Blazor FileUpload displays Preloaded Files](./images/blazor-fileupload-with-preload-files.png) +```cshtml + + + + + +
+

Removal Log:

+
    + @foreach (var log in RemovalLogs) + { +
  • @log
    • + } +
+
+ +@code { + private List RemovalLogs = new(); + + private void OnRemove(RemovingEventArgs args) + { + var timestamp = DateTime.Now.ToString("HH:mm:ss"); + var fileNames = string.Join(", ", args.FilesData.Select(f => f.Name)); + RemovalLogs.Add($"[{timestamp}] Removing {args.FilesData.Count} file(s): {fileNames}"); + } +} +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthSWWLxgaAOmLBJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See Also -* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor) +- Handling custom data with upload: https://support.syncfusion.com/kb/article/16000/handling-custom-data-with-file-upload-component-in-blazor +- Upload with user info in SfUploader: https://support.syncfusion.com/kb/article/15190/how-to-handle-blazor-file-upload-with-user-information-in-sfuploader +- Upload to Azure Blob Storage: https://www.syncfusion.com/blogs/post/simple-steps-to-upload-files-to-azure-blob-storage-in-b +- Upload files to Database in Blazor: (https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor) From e9d39e4d89e2a3f6e292902c3c01f1cc53ea239f Mon Sep 17 00:00:00 2001 From: PriyankaKarthikeyan14 Date: Thu, 27 Nov 2025 18:00:01 +0530 Subject: [PATCH 2/3] Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md) --- blazor/file-upload/chunk-upload.md | 456 ++++++++++++++++++----------- blazor/file-upload/http-client.md | 4 +- 2 files changed, 290 insertions(+), 170 deletions(-) diff --git a/blazor/file-upload/chunk-upload.md b/blazor/file-upload/chunk-upload.md index 29e9dfcf8c..2b568a578d 100644 --- a/blazor/file-upload/chunk-upload.md +++ b/blazor/file-upload/chunk-upload.md @@ -9,259 +9,379 @@ documentation: ug # Chunk Upload in Blazor File Upload Component -The Uploader sends the large file split into small chunks and transmits to the server using AJAX. You can also pause, resume, and retry the failed chunk file. +### Description -N> The chunk upload works in asynchronous upload only. +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. If a part of the file fails to upload, only that specific chunk needs to be re-transmitted, rather than the entire file. This feature is particularly useful for handling large media files, database backups, or any other substantial data transfers where interruptions are a concern. The Uploader sends these chunks to the server using AJAX, enabling the ability to pause, resume, and retry failed chunk uploads. -To enable the chunk upload, set the size to [ChunkSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) option of the upload and it receives the value in `bytes`. The [OnChunkUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkUploadStart) event is triggered at the start of chunk upload process. +**Use Case:** Imagine a user uploading a 2GB video file. Without chunking, a network hiccup or browser crash during the upload would require the user to restart the entire upload from the beginning. With chunk upload, the file is broken into smaller pieces (e.g., 10MB each). If the upload fails at the 500MB mark, only the 51st chunk (and subsequent chunks) needs to be re-uploaded, saving significant time and improving user experience. -## Save and remove action for Blazor (ASP.NET Core hosted) application +**Note:** +* **The chunk upload works exclusively with asynchronous uploads.** +* **Chunk upload will only be activated when the selected file size is greater than the specified `ChunkSize`. Otherwise, files will be uploaded using the normal (non-chunked) upload mechanism.** -The server-side implementation entirely depends on the application requirements and logic. The following code snippet provides the server-side logic to handle the chunk upload using the FileUpload components. +## Chunk Configuration ->The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request. -* `chunk-index` - Indicates the index of the current chunk being received. -* `total-chunk` - Represents the total number of chunks for the file being uploaded. +To enable chunk upload, you need to configure the `ChunkSize` property within the [``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html) component. The `ChunkSize` property accepts a value in `bytes`. -```csharp -public string uploads = Path.Combine(Directory.GetCurrentDirectory(), "Uploaded Files"); // Set your desired upload directory path +The following properties allow for further control over the chunk upload process: -public async Task Save(IFormFile UploadFiles) -{ - try - { - if (UploadFiles.Length > 0) - { - var fileName = UploadFiles.FileName; +* **[`ChunkSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_ChunkSize)**: Sets the size of each chunk in bytes. Larger files will be divided based on this size. +* **[`RetryAfterDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RetryAfterDelay)**: Specifies the delay in milliseconds before attempting a retry after a chunk upload fails. The default is 500 milliseconds. +* **[`RetryCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RetryCount)**: Defines the number of times the component will attempt to retry a failed chunk upload. By default, it retries 3 times. If all retries fail, the upload is aborted, and the `Failure` event is triggered. - // Create upload directory if it doesn't exist - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } +### Code Example - Enabling Chunk Upload - if (UploadFiles.ContentType == "application/octet-stream") //Handle chunk upload - { - // Fetch chunk-index and total-chunk from form data - var chunkIndex = Request.Form["chunk-index"]; - var totalChunk = Request.Form["total-chunk"]; +```cshtml +@using Syncfusion.Blazor.Inputs - // Path to save the chunk files with .part extension - var tempFilePath = Path.Combine(uploads, fileName + ".part"); + + + + +``` - using (var fileStream = new FileStream(tempFilePath, chunkIndex == "0" ? FileMode.Create : FileMode.Append)) - { - await UploadFiles.CopyToAsync(fileStream); - } +### Preview - // If all chunks are uploaded, move the file to the final destination - if (Convert.ToInt32(chunkIndex) == Convert.ToInt32(totalChunk) - 1) - { - var finalFilePath = Path.Combine(uploads, fileName); +![Blazor FileUpload with Chunk Upload](./images/blazor-fileupload-with-chunk-upload.png) - // Move the .part file to the final destination without the .part extension - System.IO.File.Move(tempFilePath, finalFilePath); +### Resumable Upload - return Ok(new { status = "File uploaded successfully" }); - } +The File Upload component supports resumable uploads, allowing users to pause and resume large file transfers. This is invaluable when dealing with network interruptions or when a user needs to temporarily halt an upload. The pause icon becomes available once an upload begins. - return Ok(new { status = "Chunk uploaded successfully" }); - } - else //Handle normal upload - { - var filePath = Path.Combine(uploads, fileName); +>**The pause and resume features are only available when chunk upload is enabled.** - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - await UploadFiles.CopyToAsync(fileStream); - } +### Public Methods: - return Ok(new { status = "File uploaded successfully" }); - } - } +* **`PauseAsync()`**: Manually pauses the ongoing file upload. +* **`ResumeAsync()`**: Resumes a paused file upload. - return BadRequest(new { status = "No file to upload" }); - } - catch (Exception ex) +### Code Example - Resumable Upload + +```cshtml +@using Syncfusion.Blazor.Inputs + + + + + + + + + + +@code { + SfUploader UploaderObj; + + private void OnResumeHandler(PauseResumeEventArgs args) { - return StatusCode(500, new { status = "Error", message = ex.Message }); + // Custom logic to execute when an upload is resumed } -} -// Method to handle file removal (optional if needed) -public async Task Remove(string UploadFiles) -{ - try + private void PausedHandler(PauseResumeEventArgs args) { - var filePath = Path.Combine(uploads, UploadFiles); + // Custom logic to execute when an upload is paused + } - if (System.IO.File.Exists(filePath)) - { - System.IO.File.Delete(filePath); - return Ok(new { status = "File deleted successfully" }); - } - else - { - return NotFound(new { status = "File not found" }); - } + private async Task PauseUpload() + { + await UploaderObj.PauseAsync(); } - catch (Exception ex) + + private async Task ResumeUpload() { - return StatusCode(500, new { status = "Error", message = ex.Message }); + await UploaderObj.ResumeAsync(); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBSCiBHpPMIERUe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Preview + +![Resuming File Uploads in Blazor FileUpload](./images/blazor-fileupload-resume-file-upload.png) + +### Cancel Upload + +Users can cancel an ongoing file upload using the cancel icon in the UI or programmatically using the `CancelAsync()` method. When an upload is canceled, any partially uploaded file is removed from the server. + +If an upload fails (e.g., due to server error), the pause icon transforms into a retry icon. Clicking this icon will retry the failed chunk request from where it left off. However, if you explicitly cancel an upload and then retry, the file upload action will restart from the beginning. + +**Note:** +* **Chunk upload retry:** Retries to upload the failed request from the point of failure. +* **Default upload retry:** Retries to upload the entire failed file again from the beginning. + +### Public Methods: + +* **`CancelAsync()`**: Cancels the current upload operation. +* **`RetryAsync()`**: Retries the upload of a failed or canceled file. + +### Code Example - Cancel Upload + ```cshtml @using Syncfusion.Blazor.Inputs - + - + + + + @code { - private void OnChunkUploadStartHandler(UploadingEventArgs args) - { - // Here, you can customize your code. - } - private void OnChunkSuccessHandler(SuccessEventArgs args) - { - // Here, you can customize your code. - } - private void SuccessHandler(SuccessEventArgs args) + SfUploader UploaderObj; + + private async Task CancelFirstFile() { - // Here, you can customize your code. + await UploaderObj.CancelAsync(); } - private void OnChunkFailureHandler(FailureEventArgs args) + + private async Task RetryFirstFile() { - // Here, you can customize your code. + await UploaderObj.RetryAsync(); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSiiVdpPBHTykT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +### Preview -![Blazor FileUpload with Chunk Upload](./images/blazor-fileupload-with-chunk-upload.png) - -The chunk upload functionality separates the selected files into blobs of the data or chunks. These chunks are transmitted to the server using an AJAX request. The chunks are sent in **sequential** order, and the next chunk can be sent to the server according to the success of the previous chunk. If any one of the chunks failed, then the remaining chunk cannot be sent to the server. The [ChunkSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkSuccess) or [ChunkFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkFailure) event will be triggered when the chunk is sent to the server successfully or failed. If all the chunks are sent to the server successfully, the uploader [Success](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success) event is triggered. +![Canceling File Uploads in Blazor FileUpload](./images/blazor-fileupload-cancel-file-upload.png) -N> Chunk upload will work when the selected file size is greater than the specified chunk size. otherwise, it upload the files normally. +## Backend Configuration (ASP.NET Core Hosted Application) -## Save action configuration in server-side blazor +The server-side implementation is crucial for handling the incoming file chunks. The following C# code snippet demonstrates how to handle chunk uploads in an ASP.NET Core backend. -The uploader save action configuration in server-side blazor application, using MVC via `UseMvcWithDefaultRoute` in ASP.NET Core 3.0 and `services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)` on IServiceCollection requires an explicit opt-in inside **Startup.cs** page. This is required because MVC must know whether it can rely on the authorization and CORS Middle ware during initialization. +> The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request. +> * `chunk-index` - Indicates the index of the current chunk being received. +> * `total-chunk` - Represents the total number of chunks for the file being uploaded. ```csharp -using Microsoft.AspNetCore.Mvc; - -public void ConfigureServices(IServiceCollection services) +public class SampleDataController : Controller { - services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0); - services.AddRazorPages(); - services.AddServerSideBlazor(); - services.AddSingleton(); -} + public string uploads = Path.Combine(Directory.GetCurrentDirectory(), "Uploaded Files"); // Set your desired upload directory path -public void Configure(IApplicationBuilder app, IWebHostEnvironment env) -{ - if (env.IsDevelopment()) - { - app.UseDeveloperExceptionPage(); - } - else + [HttpPost("api/SampleData/Save")] + public async Task Save(IFormFile UploadFiles) { - app.UseExceptionHandler("/Error"); - app.UseHsts(); - } + try + { + if (UploadFiles.Length > 0) + { + var fileName = UploadFiles.FileName; - app.UseHttpsRedirection(); - app.UseStaticFiles(); + // Create upload directory if it doesn't exist + if (!Directory.Exists(uploads)) + { + Directory.CreateDirectory(uploads); + } + + // Check for chunk upload based on ContentType + if (Request.Form.ContainsKey("chunk-index") && Request.Form.ContainsKey("total-chunk")) // Handle chunk upload + { + // Fetch chunk-index and total-chunk from form data + var chunkIndex = Request.Form["chunk-index"]; + var totalChunk = Request.Form["total-chunk"]; - app.UseRouting(); - app.UseMvcWithDefaultRoute(); + // Path to save the chunk files with .part extension + var tempFilePath = Path.Combine(uploads, fileName + ".part"); - app.UseEndpoints(endpoints => + using (var fileStream = new FileStream(tempFilePath, chunkIndex == "0" ? FileMode.Create : FileMode.Append)) + { + await UploadFiles.CopyToAsync(fileStream); + } + + // If all chunks are uploaded, move the file to the final destination + if (Convert.ToInt32(chunkIndex) == Convert.ToInt32(totalChunk) - 1) + { + var finalFilePath = Path.Combine(uploads, fileName); + + // Move the .part file to the final destination without the .part extension + System.IO.File.Move(tempFilePath, finalFilePath); + + return Ok(new { status = "File uploaded successfully" }); + } + + return Ok(new { status = "Chunk uploaded successfully" }); + } + else // Handle normal upload + { + var filePath = Path.Combine(uploads, fileName); + + using (var fileStream = new FileStream(filePath, FileMode.Create)) + { + await UploadFiles.CopyToAsync(fileStream); + } + + return Ok(new { status = "File uploaded successfully" }); + } + } + + return BadRequest(new { status = "No file to upload" }); + } + catch (Exception ex) + { + return StatusCode(500, new { status = "Error", message = ex.Message }); + } + } + + // Method to handle file removal (optional if needed) + [HttpPost("api/SampleData/Remove")] + public IActionResult Remove(string UploadFiles) { - endpoints.MapBlazorHub(selector: "app"); - endpoints.MapFallbackToPage("/_Host"); - }); + try + { + var filePath = Path.Combine(uploads, UploadFiles); + + if (System.IO.File.Exists(filePath)) + { + System.IO.File.Delete(filePath); + return Ok(new { status = "File deleted successfully" }); + } + else + { + return NotFound(new { status = "File not found" }); + } + } + catch (Exception ex) + { + return StatusCode(500, new { status = "Error", message = ex.Message }); + } + } } ``` -## Additional configurations +### Save action configuration in server-side blazor -To modify the chunk upload, the following options can be used. +For server-side Blazor applications using ASP.NET Core 3.0 or later, configuring the uploader's `Save` action requires explicit opt-in for MVC routing within your `Startup.cs` file. This ensures that MVC can properly handle authorization and CORS middleware during initialization. -* **RetryAfterDelay**: If error occurs while sending any chunk request from JavaScript, hold the operation for 500 milliseconds (by default), and retry the operation using chunk. This can be achieved by using the [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) property. You can modify the holding time interval in milliseconds. +```csharp +using Microsoft.AspNetCore.Mvc; -* **RetryCount**: Specifies the number of retry actions performed when the file fails to upload. By default, retry action is performed 3 times. If the file fails to upload continuously, the request is -aborted and the uploader [Failure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Failure) event will trigger. +public class Startup +{ + public void ConfigureServices(IServiceCollection services) + { + services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0); + services.AddRazorPages(); + services.AddServerSideBlazor(); + services.AddSingleton(); // Example service + } -The following sample specifies the chunk upload delay with 3000 milliseconds and the retry count is 5. The failure event is triggered as the wrong saveUrl is used. + public void Configure(IApplicationBuilder app, IWebHostEnvironment env) + { + if (env.IsDevelopment()) + { + app.UseDeveloperExceptionPage(); + } + else + { + app.UseExceptionHandler("/Error"); + app.UseHsts(); + } -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload/#save-and-remove-action-for-blazor-aspnet-core-hosted-application). + app.UseHttpsRedirection(); + app.UseStaticFiles(); -```cshtml -@using Syncfusion.Blazor.Inputs + app.UseRouting(); + app.UseMvcWithDefaultRoute(); // Crucial for MVC controller routing - - - - + app.UseEndpoints(endpoints => + { + endpoints.MapBlazorHub(selector: "app"); + endpoints.MapFallbackToPage("/_Host"); + }); + } +} ``` -## Resumable upload +## Events -Allows you to resume an upload operation after a network failure or manually interrupts (pause) the upload. You can perform pause and resume upload actions using public methods (pause and resume) and UI interaction. The pause icon is enabled after the upload begins. The [Paused](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Paused) event is triggered when we pause the uploading file, and the [OnResume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnResume) event is triggered when we click the resume icon to upload the remaining file. +The Blazor Uploader component provides several events specific to chunk upload operations, allowing you to hook into different stages of the process and implement custom logic. -N> The pause and resume features are available only when the chunk upload is enabled. +* **[`OnChunkUploadStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkUploadStart)**: Triggered at the beginning of each chunk's upload process. This event allows you to perform actions before a chunk is sent to the server. +* **[`OnChunkSuccess`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkSuccess)**: Occurs when a single chunk has been successfully uploaded to the server. This can be used for tracking progress per chunk. +* **[`OnChunkFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkFailure)**: Fired when an individual chunk upload fails. This is useful for error handling and logging specific chunk failures. +* **[`Paused`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Paused)**: Triggered when a file transfer is paused by the user or programmatically. +* **[`OnResume`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnResume)**: Occurs when a paused file transfer is resumed. +* **[`Canceling`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Canceling)**: Triggered when an upload request is about to be canceled. +* **[`Success`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success)**: This event is triggered when all chunks of a file have been successfully uploaded, indicating the completion of the entire file transfer. +* **[`Failure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Failure)**: Occurs when the overall file upload operation (after all retries) ultimately fails. -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload/#save-and-remove-action-for-blazor-aspnet-core-hosted-application). +### Code Example - Handling Chunk Events ```cshtml @using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Inputs - - - + + + + + +
+

Upload Status:

+

Chunk Upload: @ChunkStatus

+

Pause/Resume: @PauseResumeStatus

+

Final Status: @FinalStatus

+
+ @code { - private void OnResumeHandler(PauseResumeEventArgs args) + private string ChunkStatus = "Waiting..."; + private string PauseResumeStatus = "Waiting..."; + private string FinalStatus = "Waiting..."; + + private void OnChunkUploadStartHandler(UploadingEventArgs args) { - // Here, you can customize your code. + ChunkStatus = $"Started chunk upload for {args.FileData.Name}"; } - private void PausedHandler(PauseResumeEventArgs args) + + private void OnChunkSuccessHandler(SuccessEventArgs args) { - // Here, you can customize your code. + ChunkStatus = $"Chunk upload successful for {args.File?.Name}, Response: {args.Response}"; } -} -``` - -![Resuming File Uploads in Blazor FileUpload](./images/blazor-fileupload-resume-file-upload.png) - -## Cancel upload - -The uploader component allows you to cancel the uploading file. This can be achieved by clicking the cancel icon or using the `Cancel` method. The [Canceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Canceling) event will be fired whenever the file upload request is canceled. While canceling the upload request, the partially uploaded file is removed from the server. + private void OnChunkFailureHandler(Syncfusion.Blazor.Inputs.FailureEventArgs args) + { + ChunkStatus = $"Chunk upload failed for {args.File?.Name}, Error: {args.StatusText}"; + } -When the request fails, the pause icon is changed to retry icon. By clicking the retry icon, sends the failed chunk request again to the server and upload started from where it is failed. You can retry the canceled upload request again using retry UI or `Retry` methods. But, if you retry this, the file upload action again starts from initial. + private void PausedHandler(PauseResumeEventArgs args) + { + PauseResumeStatus = $"File {args.File?.Name} paused."; + } -The following example explains about chunk upload with cancel support. + private void OnResumeHandler(PauseResumeEventArgs args) + { + PauseResumeStatus = $"File {args.File?.Name} resumed."; + } -`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application). + private void SuccessHandler(SuccessEventArgs args) + { + FinalStatus = $"File {args.File?.Name} uploaded successfully. Response: {args.Response}"; + } -```cshtml -@using Syncfusion.Blazor.Inputs + private void FailureHandler(Syncfusion.Blazor.Inputs.FailureEventArgs args) + { + FinalStatus = $"File upload failed for {args.File?.Name}. Error: {args.StatusText}"; + } +} - - - - ``` - - -![Canceling File Uploads in Blazor FileUpload](./images/blazor-fileupload-cancel-file-upload.png) - -N> The retry action has different working behavior for chunk upload and default upload. -
* Chunk upload: Retries to upload the failed request where it is failed previously. -
* Default upload: Retries to upload the failed file again from initial. \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoiCrRfOPSTmJm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/file-upload/http-client.md b/blazor/file-upload/http-client.md index 09de64864f..f6f0be6080 100644 --- a/blazor/file-upload/http-client.md +++ b/blazor/file-upload/http-client.md @@ -9,9 +9,9 @@ documentation: ug # HTTP Client in Blazor File Upload Component -The File Upload component in Blazor enables you to utilize the [HttpClientInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property to append the HttpClient instance to file upload requests, allowing for customized request headers and form data. This approach offers flexibility in managing authentication and custom request configurations. +The File Upload component in Blazor enables you to utilize the [`HttpClientInstance`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property of the `Uploader` component. This property allows you to append a pre-configured `HttpClient` instance to all file upload (SaveUrl) and remove (RemoveUrl) requests. This is particularly useful for centralized management of authentication tokens, custom headers, or other request configurations that need to be consistently applied across multiple HttpClient requests within your application. -The following example illustrates how to configure the File Upload component with HttpClient in a Blazor application. +The following example illustrates how to configure an `HttpClient` instance and use it with the File Upload component in a Blazor application to include custom headers. ```cshtml @using Syncfusion.Blazor.Inputs From cadc3aa45fba21e8268ee275b40943a45e9cd71d Mon Sep 17 00:00:00 2001 From: PriyankaKarthikeyan14 Date: Thu, 27 Nov 2025 18:29:38 +0530 Subject: [PATCH 3/3] Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/async.md) --- .../file-upload/file-upload-configuration.md | 32 +++++++++---------- blazor/file-upload/file-upload-methods.md | 14 +------- .../getting-started-with-maui-app.md | 14 -------- .../getting-started-with-server-app.md | 10 ------ .../getting-started-with-web-app.md | 10 ------ blazor/file-upload/getting-started.md | 10 ------ 6 files changed, 17 insertions(+), 73 deletions(-) diff --git a/blazor/file-upload/file-upload-configuration.md b/blazor/file-upload/file-upload-configuration.md index b5e75b5b31..451e90f906 100644 --- a/blazor/file-upload/file-upload-configuration.md +++ b/blazor/file-upload/file-upload-configuration.md @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @* 5 MB *@ @@ -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 @* 1 KB *@ @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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
@@ -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 diff --git a/blazor/file-upload/file-upload-methods.md b/blazor/file-upload/file-upload-methods.md index 38fbd88dfc..59a3858832 100644 --- a/blazor/file-upload/file-upload-methods.md +++ b/blazor/file-upload/file-upload-methods.md @@ -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. @@ -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 @@ -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. @@ -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. @@ -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. @@ -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. @@ -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) diff --git a/blazor/file-upload/getting-started-with-maui-app.md b/blazor/file-upload/getting-started-with-maui-app.md index 14e48a676b..b1f982272e 100644 --- a/blazor/file-upload/getting-started-with-maui-app.md +++ b/blazor/file-upload/getting-started-with-maui-app.md @@ -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 Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® 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. @@ -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 @@ -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 @@ -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 @@ -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 diff --git a/blazor/file-upload/getting-started-with-server-app.md b/blazor/file-upload/getting-started-with-server-app.md index f74d7ecccf..38deba2b4c 100644 --- a/blazor/file-upload/getting-started-with-server-app.md +++ b/blazor/file-upload/getting-started-with-server-app.md @@ -221,8 +221,6 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![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. @@ -282,8 +280,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 @@ -354,8 +350,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 @@ -395,8 +389,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 @@ -450,8 +442,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 diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index e40b214485..d8632b2c60 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -261,8 +261,6 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![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. @@ -322,8 +320,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 @@ -394,8 +390,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 @@ -435,8 +429,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 @@ -490,8 +482,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 diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md index 4b2ec2aca6..daccccf37a 100644 --- a/blazor/file-upload/getting-started.md +++ b/blazor/file-upload/getting-started.md @@ -216,8 +216,6 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![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. @@ -277,8 +275,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 @@ -349,8 +345,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 @@ -390,8 +384,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 @@ -445,8 +437,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