diff --git a/blazor/file-upload/getting-started-with-maui-app.md b/blazor/file-upload/getting-started-with-maui-app.md
index 6fca4b0e70..14e48a676b 100644
--- a/blazor/file-upload/getting-started-with-maui-app.md
+++ b/blazor/file-upload/getting-started-with-maui-app.md
@@ -50,9 +50,9 @@ To use the MAUI project templates, install the Mobile development with the .NET
You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-## Install Blazor Inputs and Themes NuGet in the App
+## Install Syncfusion® Blazor Inputs and Themes NuGet in the App
-To add **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add **Blazor File Upload** component in the app, install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the .NET CLI.
{% tabs %}
@@ -79,7 +79,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor
@using Syncfusion.Blazor.Inputs
{% endhighlight %}
@@ -133,16 +133,22 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
- //Blazor File Upload Component script reference.
+
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-## Add Blazor File Upload component
+## Add Syncfusion® Blazor File Upload component
+
+The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application.
+
+### Simple Code to render a Usable File Upload Component
Add the Syncfusion® Blazor File Upload component in the **~/Pages/Index.razor** file.
+The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally.
+
{% tabs %}
{% highlight razor %}
@@ -165,39 +171,65 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi
N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
-
-## Without server-side API endpoint
+* 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)" %}
+
+* 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.
-You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html).
+{% 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)" %}
-### Save and Remove actions
+
-You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below.
+## 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.
+
+### Code Example
+
+This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button.
{% tabs %}
{% highlight razor %}
@using Syncfusion.Blazor.Inputs
+@using System.IO
+
+
@code {
private async Task OnChange(UploadChangeEventArgs args)
{
try
{
- foreach (var file in args.Files)
+ foreach (var fileEntry 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();
+ // Define a path where you want to save the file.
+ // For a Blazor Server app, this path will be on the server.
+ var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
+ if (!Directory.Exists(uploadsFolder))
+ {
+ Directory.CreateDirectory(uploadsFolder);
+ }
+
+ // Construct the full file path.
+ var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name);
+
+ // Use a FileStream to write the uploaded file's content to the server.
+ await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write))
+ {
+ // OpenReadStream with long.MaxValue allows reading the entire stream.
+ await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream);
+ }
+ Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'");
}
}
catch (Exception ex)
{
- Console.WriteLine(ex.Message);
+ Console.WriteLine($"Error saving file: {ex.Message}");
}
}
}
@@ -205,20 +237,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help.
{% endhighlight %}
{% endtabs %}
-
+N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
+
-While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below.
+## Memory stream
+
+When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system.
+
+### Code Example
+
+This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O.
{% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Inputs
+@using System.IO
-Private void onRemove(RemovingEventArgs args)
+
+
+
+
+@if (!string.IsNullOrEmpty(base64Image))
{
- foreach(var removeFile in args.FilesData)
+
Uploaded Image Preview (Base64)
+
+}
+
+@code {
+ private string base64Image;
+
+ private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args)
{
- if (File.Exists(Path.Combine(@"rootPath", removeFile.Name)))
+ base64Image = string.Empty; // Clear previous image
+
+ foreach (var fileEntry in args.Files)
{
- File.Delete(Path.Combine(@"rootPath", removeFile.Name))
+ if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase))
+ {
+ // Create a MemoryStream to hold the file content.
+ using var memoryStream = new MemoryStream();
+
+ // Copy the file's content from the upload stream to the MemoryStream.
+ await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream);
+
+ // Convert the MemoryStream content to a byte array.
+ byte[] imageBytes = memoryStream.ToArray();
+
+ // Convert byte array to Base64 string for display or further processing.
+ base64Image = Convert.ToBase64String(imageBytes);
+ Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64.");
+ }
+ else
+ {
+ Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview.");
+ // For non-image files, you could read their content as text or handle differently.
+ // Example for text file:
+ // memoryStream.Position = 0; // Reset stream position
+ // using var reader = new StreamReader(memoryStream);
+ // var content = await reader.ReadToEndAsync();
+ // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}");
+ }
}
}
}
@@ -226,109 +309,138 @@ Private void onRemove(RemovingEventArgs args)
{% endhighlight %}
{% endtabs %}
-## With server-side API endpoint
+N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server.
-The upload process requires save and remove action URL to manage the upload process in the server.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> * The save action is necessary to handle the upload operation.
- * The remove action is optional, one can handle the removed files from server.
+
-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.
-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.
+## Created Event
-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. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server.
+The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered.
+
+### Code Example
+
+This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created.
{% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
-[Route("api/[controller]")]
-public class SampleDataController : Controller
-{
- public string uploads = ".\\Uploaded Files"; // replace with your directory path
+@using Syncfusion.Blazor.Inputs
- [HttpPost("[action]")]
- public async Task Save(IFormFile UploadFiles) // Save the uploaded file here
- {
- if (UploadFiles.Length > 0)
- {
- //Create directory if not exists
- if (!Directory.Exists(uploads))
- {
- Directory.CreateDirectory(uploads);
- }
+
+
+
- var filePath = Path.Combine(uploads, UploadFiles.FileName);
- if (System.IO.File.Exists(filePath))
- {
- //Return conflict status code
- return new StatusCodeResult(StatusCodes.Status409Conflict);
- }
- using (var fileStream = new FileStream(filePath, FileMode.Create))
- {
- //Save the uploaded file to server
- await UploadFiles.CopyToAsync(fileStream);
- }
- }
- return Ok();
- }
+
@statusMessage
+@code {
+ private string statusMessage = "Uploader not yet created.";
- [HttpPost("[action]")]
- public void Remove(string UploadFiles) // Delete the uploaded file here
+ private void OnUploaderCreated()
{
- if(UploadFiles != null)
- {
- var filePath = Path.Combine(uploads, UploadFiles);
- if (System.IO.File.Exists(filePath))
- {
- //Delete the file from server
- System.IO.File.Delete(filePath);
- }
- }
+ statusMessage = "Syncfusion File Uploader has been successfully created and initialized!";
+ Console.WriteLine(statusMessage);
+ // You could also interact with JavaScript to modify DOM here if needed.
+ // For example: JSRuntime.InvokeVoidAsync("someJsFunction");
}
}
{% endhighlight %}
{% endtabs %}
-The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process.
+N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
+
+
+## File Selected Event
+
+The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions.
+
+### Code Example
+
+This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size.
{% tabs %}
{% highlight razor %}
-
-
-
+@using Syncfusion.Blazor.Inputs
+@using System.Linq
+
+
+
+
@validationMessage
+
@code {
- private void OnFailureHandler(FailureEventArgs args)
- {
- // Here, you can customize your code.
- }
- private void OnActionCompleteHandler(ActionCompleteEventArgs args)
+ private string validationMessage = "";
+ private readonly long MaxFileSize = 1024 * 1024; // 1 MB
+
+ private void OnFileSelected(SelectedEventArgs args)
{
- // Here, you can customize your code.
+ validationMessage = "";
+ foreach (var file in args.FilesData)
+ {
+ if (file.Size > MaxFileSize)
+ {
+ validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. ";
+ args.Cancel = true; // Prevents this file from being added
+ }
+ }
+ if (!string.IsNullOrEmpty(validationMessage))
+ {
+ Console.WriteLine(validationMessage);
+ }
+ else
+ {
+ Console.WriteLine("Files selected successfully and passed initial validation.");
+ }
}
}
{% endhighlight %}
{% endtabs %}
-## Configure allowed file types
+N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
+
+
+## OnFileListRender
-You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element.
+The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions.
+
+### Code Example
+
+This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender)
{% tabs %}
{% highlight razor %}
-
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+@code {
+ SfUploader fileobj;
+ private void OnFileListRenderHandler(FileListRenderingEventArgs args)
+ {
+
+ }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %}
-
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload).
## See also
@@ -336,4 +448,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
-4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly)
\ No newline at end of file
+4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly)
+5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload)
diff --git a/blazor/file-upload/getting-started-with-server-app.md b/blazor/file-upload/getting-started-with-server-app.md
index 5943ebd4bf..f74d7ecccf 100644
--- a/blazor/file-upload/getting-started-with-server-app.md
+++ b/blazor/file-upload/getting-started-with-server-app.md
@@ -7,11 +7,11 @@ control: FileUpload
documentation: ug
---
-# Getting Started with Blazor File Upload Component in Server App
+# Getting Started with Blazor File Upload Component
-This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
+This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server Application using Visual Studio, Visual Studio Code, and the .NET CLI.
-To get start quickly with Blazor File Upload, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload) sample:
+To get started quickly with the Blazor File Upload, you can check out this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload).
{% tabcontents %}
@@ -19,15 +19,15 @@ To get start quickly with Blazor File Upload, you can check on this [GitHub](htt
## Prerequisites
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
## Create a new Blazor App in Visual Studio
-You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+You can create a **Blazor Server App** using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
## Install Syncfusion® Blazor Inputs and Themes NuGet in the App
-To add **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -46,7 +46,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
## Create a new Blazor App in Visual Studio Code
@@ -67,9 +67,9 @@ cd BlazorApp
## Install Syncfusion® Blazor Inputs and Themes NuGet in the App
-* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
+* Ensure you’re in the project root directory where your `.csproj` file is located.
+* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
{% tabs %}
@@ -103,7 +103,7 @@ dotnet --version
## Create a Blazor Server App using .NET CLI
-Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -114,11 +114,11 @@ cd BlazorApp
{% endhighlight %}
{% endtabs %}
-This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
## Install Syncfusion® Blazor Inputs and Themes NuGet in the App
-Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
## Register Syncfusion® Blazor Service
-Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App.
+Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App.
{% tabs %}
{% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %}
@@ -186,13 +186,19 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
//Blazor File Upload Component script reference.
-
+
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-## Add Blazor File Upload component
+## Add Syncfusion® Blazor File Upload component
+
+The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application.
+
+### Simple Code to render a Usable File Upload Component
+
+The most basic way to render the File Upload component is by adding the `