From da5aa28ab5dd87992a8a33a9e4092b710f35eef3 Mon Sep 17 00:00:00 2001
From: NithyaSivaprakasam
<103498896+NithyaSivaprakasam@users.noreply.github.com>
Date: Mon, 28 Jul 2025 14:53:26 +0530
Subject: [PATCH 001/194] Update column-resizing.md
---
blazor/datagrid/column-resizing.md | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md
index 4cabe6784d..4628e0a856 100644
--- a/blazor/datagrid/column-resizing.md
+++ b/blazor/datagrid/column-resizing.md
@@ -88,7 +88,8 @@ public class OrderDetails
> * You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of **GridColumn** to false.
> * In RTL mode, you can click and drag the left edge of the header cell to resize the column.
-> * The width property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
+> * The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) property of the GridColumn can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
+> * When the `Width` property of a GridColumn is explicitly set to **0** and column resizing is enabled, the DataGrid will automatically assign a default width of **200px** to that column.
## Restrict the resizing based on minimum and maximum width
@@ -562,4 +563,4 @@ public class OrderDetails
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
From ac4eb7cf599b8339a7a11fa3804b3fa145ee4bc8 Mon Sep 17 00:00:00 2001
From: Yuvan111 <89587491+Yuvan111@users.noreply.github.com>
Date: Fri, 19 Sep 2025 16:54:56 +0530
Subject: [PATCH 002/194] 983306: Re-structing the template section of File
uploader.
---
blazor/file-upload/template.md | 96 ++++++++++++++++------------------
1 file changed, 46 insertions(+), 50 deletions(-)
diff --git a/blazor/file-upload/template.md b/blazor/file-upload/template.md
index 27c5a36929..122c338c38 100644
--- a/blazor/file-upload/template.md
+++ b/blazor/file-upload/template.md
@@ -1,7 +1,7 @@
---
layout: post
title: Template in Blazor File Upload Component | Syncfusion
-description: Checkout and learn here about Template in Syncfusion Blazor File Upload component and much more details.
+description: Learn how to customize the Syncfusion Blazor File Upload component's appearance using templates, including how to add a progress bar.
platform: Blazor
control: File Upload
documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
# Template in Blazor File Upload Component
-The template in the code snippet allows for the customization of how file details are displayed in the uploader's UI. It provides flexibility to define the structure and styling of individual file elements, such as file name, size, and status. This allows to create a tailored and visually appealing file upload interface that aligns with their application's design and user experience requirements.
+The Blazor File Upload component allows for the customization of the file list items by using a template. This provides the flexibility to define the structure and styling of individual file elements, such as the file name, size, and status. A custom template can create a tailored and visually appealing file upload interface that aligns with an application's design and user experience requirements.
### With server-side API endpoint
@@ -20,10 +20,12 @@ The template in the code snippet allows for the customization of how file detail
-
-
File Name : @(context.Name)
-
File Size : @(context.Size)
-
File Status : @(context.Status)
+
+
+
File Name : @context.Name
+
File Size : @context.Size
+
File Status : @context.Status
+
@@ -35,28 +37,31 @@ The template in the code snippet allows for the customization of how file detail
-
-
File Name : @(context.Name)
-
File Size : @(context.Size)
-
File Status : @(context.Status)
+
+
+
File Name : @context.Name
+
File Size : @context.Size
+
File Status : @context.Status
+
```
-### Adding progressbar using template
+## Adding a progress bar using a template
-When using the file upload template, the progress bar does not display in the UI. We can add the progress bar using template and then show the progress while reading and writing to the stream in the ValueChange event. The code snippet below demonstrates a Blazor file upload example with a progress bar using a custom template. The custom template includes elements to display the file name, size, progress bar, and file status.
+When using a file upload template, the default progress bar is not displayed in the UI. A progress bar can be added within the template, and its progress can be updated by reading and writing to the stream in the `ValueChange` event. The following code snippet demonstrates how to add a progress bar to a Blazor File Upload component using a custom template. The custom template includes elements to display the file name, size, progress bar, and file status.
```cshtml
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.ProgressBar
-
-
+
+
+
-
+
- @this.GetFileName(context.Name)
+ @GetFileName(context.Name)@("." + context.Type)
@if (context.Size > 0)
{
@@ -67,9 +72,9 @@ When using the file upload template, the progress bar does not display in the UI
{
-
+
- @(ProgressValue.ToString() + "%")
+ @(ProgressValue + "%")
}
@if (fileStates.ContainsKey(context.Name) && fileStates[context.Name] && context.Status == "File uploaded successfully")
@@ -86,52 +91,50 @@ When using the file upload template, the progress bar does not display in the UI
}
@if (fileStates.ContainsKey(context.Name) && fileStates[context.Name] && context.Status == "File uploaded successfully")
{
- ClickHandler(context)">
+ ClickHandler(context)">
}
else
{
- ClickHandler(context)">
+ ClickHandler(context)">
}
-
+
@code {
- private SfUploader uploderObj;
- public bool isVisible { get; set; } = false;
- private FileInfo CurrentFile {get; set;}
+ private SfUploader uploaderObj;
+ private FileInfo CurrentFile { get; set; }
public string fileSize { get; set; } = "0";
public string RemoveIconDisable = string.Empty;
-#pragma warning disable CA2213 // Disposable fields should be disposed
private readonly SemaphoreSlim FileSemaphore = new SemaphoreSlim(1);
-#pragma warning restore CA2213 // Disposable fields should be disposed
private decimal ProgressValue { get; set; } = 0;
private Dictionary fileStates = new Dictionary();
+
public string CalculateFileSize(double size)
{
- string fileSizeStr = "";
if (size >= 1024 * 1024)
{
- return fileSizeStr = $"{size / (1024f * 1024f):0.00} MB";
+ return $"{size / (1024f * 1024f):0.00} MB";
}
else if (size >= 1024)
{
- return fileSizeStr = $"{size / 1024f:0.00} KB";
+ return $"{size / 1024f:0.00} KB";
}
else
{
- return fileSizeStr = $"{size} bytes";
+ return $"{size} bytes";
}
}
+
private string GetFileName(string fileName)
{
string type = GetFileType(fileName);
string[] names = fileName.Split(new string[] { "." + type }, StringSplitOptions.None);
return names[0];
}
+
private string GetFileType(string name)
-#pragma warning restore CA1822 // Mark members as static
{
string extension = string.Empty;
int index = name.LastIndexOf('.');
@@ -139,51 +142,45 @@ When using the file upload template, the progress bar does not display in the UI
{
extension = name.Substring(index + 1);
}
-
- return (!string.IsNullOrEmpty(extension)) ? extension : string.Empty;
- }
- private async Task onFileRemove()
- {
- await uploderObj.RemoveAsync();
+ return !string.IsNullOrEmpty(extension) ? extension : string.Empty;
}
+
public async Task ClickHandler(FileInfo context)
{
- await uploderObj.RemoveAsync(new FileInfo[] { context });
+ await uploaderObj.RemoveAsync(new FileInfo[] { context });
}
- public void onBeforeUpload(BeforeUploadEventArgs args)
+
+ public void OnBeforeUpload(BeforeUploadEventArgs args)
{
foreach (var file in args.FilesData)
{
fileStates[file.Name] = false;
}
}
- public void onSuccess(SuccessEventArgs args)
+
+ public void OnSuccess(SuccessEventArgs args)
{
- //fileStates[args.File.Name] = false;
- isVisible = false;
- this.ProgressValue = 0;
+ ProgressValue = 0;
}
-
- public async Task onChange(UploadChangeEventArgs args)
+
+ public async Task OnChange(UploadChangeEventArgs args)
{
await FileSemaphore.WaitAsync();
try
{
foreach (var file in args.Files)
{
- var path = @"" + file.FileInfo.Name;
+ var path = Path.Combine(Path.GetTempPath(), file.FileInfo.Name);
CurrentFile = file.FileInfo;
CurrentFile.Status = "Uploading";
await using FileStream writeStream = new(path, FileMode.Create);
using var readStream = file.File.OpenReadStream(file.File.Size);
var bytesRead = 0;
- var totalRead = 0;
var buffer = new byte[1024 * 10];
while ((bytesRead = await readStream.ReadAsync(buffer)) != 0)
{
RemoveIconDisable = "e-disabled";
- totalRead += bytesRead;
await writeStream.WriteAsync(buffer, 0, bytesRead);
ProgressValue = (long)((decimal)readStream.Position * 100) / readStream.Length;
StateHasChanged();
@@ -191,7 +188,6 @@ When using the file upload template, the progress bar does not display in the UI
CurrentFile.Status = "File uploaded successfully";
RemoveIconDisable = string.Empty;
fileStates[file.FileInfo.Name] = true;
-
}
}
catch (Exception ex)
@@ -207,4 +203,4 @@ When using the file upload template, the progress bar does not display in the UI
}
```
-
\ No newline at end of file
+
\ No newline at end of file
From bc5a112d93d9e7cb97db22577d77cfac3c33b2f5 Mon Sep 17 00:00:00 2001
From: Yuvan111 <89587491+Yuvan111@users.noreply.github.com>
Date: Fri, 19 Sep 2025 18:20:12 +0530
Subject: [PATCH 003/194] 983306: Re-structing the Accessibility and
Localization section of File uploader.
---
blazor/file-upload/accessibility.md | 31 +++++++++++++++--------------
blazor/file-upload/localization.md | 13 ++++++++++--
2 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/blazor/file-upload/accessibility.md b/blazor/file-upload/accessibility.md
index 1b94f93478..1f06034b4d 100644
--- a/blazor/file-upload/accessibility.md
+++ b/blazor/file-upload/accessibility.md
@@ -1,7 +1,7 @@
---
layout: post
title: Accessibility in Blazor File Upload Component | Syncfusion
-description: Checkout and learn here all about accessibility in Syncfusion Blazor File Upload component and more.
+description: Learn about accessibility features in the Syncfusion Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards.
platform: Blazor
control: File Upload
documentation: ug
@@ -9,17 +9,17 @@ documentation: ug
# Accessibility in Blazor File Upload Component
-The [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Syncfusion [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It offers built-in ARIA accessibility support, making it compatible with screen readers and other assistive technologies.
-The accessibility compliance for the Blazor Uploader component is outlined below.
+The accessibility compliance for the Blazor File Upload component is outlined below:
| Accessibility Criteria | Compatibility |
| -- | -- |
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | |
| [Section 508 Support](../common/accessibility#accessibility-standards) | |
| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
-| [Color Contrast](../common/accessibility#color-contrast) | |
+| [Right-To-Left (RTL) Support](../common/accessibility#right-to-left-rtl-support) | |
+| [Color Contrast Support](../common/accessibility#color-contrast-support) | |
| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
@@ -30,13 +30,14 @@ The accessibility compliance for the Blazor Uploader component is outlined below
margin: 0.5em 0;
}
+
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.
-## Keyboard interaction
+## Keyboard Navigation
The Blazor Uploader component characterized with complete ARIA accessibility support that helps to be accessible by on-screen readers and other assistive technology devices.
@@ -44,17 +45,17 @@ The following are the standard keys that works on uploader component:
| Windows | Mac | Actions |
| --- | --- | --- |
-| Tab | Tab | Move focus to next element. |
-| Shift + Tab | ⇧ + Tab | Move focus to previous element. |
-| Enter | Enter | Triggers corresponding action to button element. |
-| Esc | Esc | Close the file browser dialog alone and cancels the upload on drop the file. |
+| Tab | Tab | Moves focus to the next focusable element. |
+| Shift + Tab | ⇧ + Tab | Moves focus to the previous focusable element. |
+| Enter | Enter | Triggers the action associated with the focused button element. |
+| Esc | Esc | Closes the file selection dialog. If a file drop is in progress, it cancels the upload. |
-## Ensuring accessibility
+## Ensuring Accessibility
-The Blazor Uploader component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor File Upload component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
-The accessibility compliance of the Uploader component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the Uploader component with accessibility tools.
+The accessibility compliance of the File Upload component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the component with accessibility tools.
-## See also
+## See Also
-* [Accessibility in Syncfusion® components](../common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion® Components](../common/accessibility)
diff --git a/blazor/file-upload/localization.md b/blazor/file-upload/localization.md
index e7c6883315..99d8e8d5d4 100644
--- a/blazor/file-upload/localization.md
+++ b/blazor/file-upload/localization.md
@@ -1,7 +1,7 @@
---
layout: post
title: Localization in Blazor File Upload Component | Syncfusion
-description: Checkout and learn here all about Localization in Syncfusion Blazor File Upload component and much more.
+description: Learn how to translate labels and tooltips in the Syncfusion Blazor File Upload component to different cultures.
platform: Blazor
control: File Upload
documentation: ug
@@ -9,4 +9,13 @@ documentation: ug
# Localization in Blazor File Upload Component
-[Blazor FileUpload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components.
\ No newline at end of file
+The Syncfusion Blazor File Upload component can be localized to display static text, such as button labels and tooltips, in different languages. This is achieved by adding a resource file (`.resx`) for each culture and referencing it in your application.
+
+The following UI elements of the File Upload component can be localized:
+
+* **Browse button text:** The label for the file selection button.
+* **Drop area hint:** The "Or drop files here" message.
+* **File status messages:** Text indicating success, failure, or upload progress.
+* **Action button tooltips:** Tooltips for buttons like "Clear" and "Upload."
+
+To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic.
From 9f97c4b6216558344a0dbe08dff71baec4e4190b Mon Sep 17 00:00:00 2001
From: Yuvan111 <89587491+Yuvan111@users.noreply.github.com>
Date: Mon, 22 Sep 2025 13:16:39 +0530
Subject: [PATCH 004/194] 983306: Re-structing the template section of File
uploader.
---
blazor/file-upload/template.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/blazor/file-upload/template.md b/blazor/file-upload/template.md
index 122c338c38..7ce7a4e5b3 100644
--- a/blazor/file-upload/template.md
+++ b/blazor/file-upload/template.md
@@ -48,6 +48,8 @@ The Blazor File Upload component allows for the customization of the file list i
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrSZOLhhmAhbeZR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Adding a progress bar using a template
When using a file upload template, the default progress bar is not displayed in the UI. A progress bar can be added within the template, and its progress can be updated by reading and writing to the stream in the `ValueChange` event. The following code snippet demonstrates how to add a progress bar to a Blazor File Upload component using a custom template. The custom template includes elements to display the file name, size, progress bar, and file status.
@@ -203,4 +205,6 @@ When using a file upload template, the default progress bar is not displayed in
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLytYhhLmmEGpkj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+

\ No newline at end of file
From 83baf8fa0bb51eb66c618893cf57fd083bbaa25a Mon Sep 17 00:00:00 2001
From: Yuvan111 <89587491+Yuvan111@users.noreply.github.com>
Date: Mon, 22 Sep 2025 15:11:17 +0530
Subject: [PATCH 005/194] 983306: Re-structing the style customization section
of File uploader.
---
blazor-toc.html | 2 +-
blazor/file-upload/style-appearance.md | 90 ++++++++++++++++++--------
2 files changed, 64 insertions(+), 28 deletions(-)
diff --git a/blazor-toc.html b/blazor-toc.html
index 5142102972..efb4b032de 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -2913,7 +2913,7 @@
diff --git a/blazor/file-upload/style-appearance.md b/blazor/file-upload/style-appearance.md
index 8704c9c106..e789fedff1 100644
--- a/blazor/file-upload/style-appearance.md
+++ b/blazor/file-upload/style-appearance.md
@@ -1,61 +1,97 @@
---
layout: post
-title: Style and appearance in Blazor File Upload Component | Syncfusion
-description: Checkout and learn here all about Style and appearance in Syncfusion Blazor File Upload component and more.
+title: File Upload Customization in Blazor File Upload Component | Syncfusion
+description: Learn how to customize the appearance of the Syncfusion Blazor File Upload component using CSS, including its container, buttons, content area, file list, and progress bar.
platform: Blazor
control: File Upload
documentation: ug
---
-# Style and appearance in Blazor File Upload Component
+# File Uploader Customization in Blazor
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
-## Customizing the appearance of File Upload container element
+## CssClass Property
-Use the following CSS to customize the appearance of File Upload container element.
+The File Upload component allows you to add a custom CSS class to its wrapper element using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CssClass) property. This approach helps scope customizations and prevents unintended global style changes.
+
+```csharp
+@using Syncfusion.Blazor.Inputs
+
+
+```
+
+By using the `e-custom-uploader` class, you can target specific elements within the File Upload component.
+
+## Customizing the Container
+
+To modify the container element of the File Upload, use the following CSS selector.
```css
-/* To specify height */
-.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper {
- height: 300px;
- width: 300px;
+/* To specify a custom height and width */
+.e-upload.e-control-wrapper {
+ height: 300px;
+ width: 300px;
}
```
-## Customizing the File Upload browse button
+## Customizing the Browse Button
-Use the following CSS to customize the File Upload browse button
+To customize the browse button, use the CSS selector below.
```css
-/* To specify font size and color */
-.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
- font-family: cursive;
- height: 40px;
- background-color: aquamarine;
- color: coral;
+/* To specify font styles, background, and color */
+.e-upload .e-file-select-wrap .e-btn {
+ font-family: 'cursive';
+ height: 40px;
+ background-color: aquamarine;
+ color: coral;
}
```
-## Customizing the File Upload content
+## Customizing the Content Area
-Use the following CSS to customize the File Upload content
+The drop area content can be customized using the following CSS.
```css
/* To specify font size and color */
-.e-upload .e-file-select-wrap .e-file-drop, .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop {
- font-size: 20px;
- color: aqua;
+.e-upload .e-file-select-wrap .e-file-drop {
+ font-size: 20px;
+ color: aqua;
}
```
-## Customizing the uploaded file container in File Upload
+## Customizing the File List
-Use the following CSS to customize the uploaded file container in File Upload
+To change the appearance of the uploaded file list container, apply the following styles.
```css
-/* To specify background color */
+/* To specify a background color */
.e-upload .e-upload-files .e-upload-file-list {
- background-color: beige;
+ background-color: beige;
}
```
+
+## Customizing the Progress Bar
+
+You can customize the progress bar and its text using the CSS selectors below.
+
+```css
+/* To specify the background color of the progress bar */
+.e-upload .e-upload-files .e-upload-progress-wrap .e-upload-progress-bar {
+ background: green;
+}
+
+/* To specify the color of the progress bar text */
+.e-upload .e-upload-files .e-upload-progress-wrap .e-progress-bar-text {
+ color: #288928;
+ font-weight: bold;
+}
+```
+
+## See Also
+
+* [How to create a responsive, full-height file uploader](https://support.syncfusion.com/kb/article/21232/how-to-create-a-responsive-full-height-file-uploader-in-blazor)
+* [How to customize button text](https://support.syncfusion.com/kb/article/17457/customizing-button-text-in-blazor-file-upload-component)
+* [How to center the Clear and Upload buttons](https://support.syncfusion.com/kb/article/17534/how-to-center-the-clear-and-upload-buttons-in-blazor-file-upload)
+* [How to customize the tooltip for the browse button](https://support.syncfusion.com/kb/article/16150/how-to-customize-tooltip-for-browse-button-in-blazor-file-upload)
From c201d8990b99d123075dbd5beb9f13b1bb8625eb Mon Sep 17 00:00:00 2001
From: Yuvan111 <89587491+Yuvan111@users.noreply.github.com>
Date: Mon, 22 Sep 2025 15:23:44 +0530
Subject: [PATCH 006/194] 983306: Re-structing the style customization section
of File uploader.
---
blazor/file-upload/style-appearance.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/blazor/file-upload/style-appearance.md b/blazor/file-upload/style-appearance.md
index e789fedff1..4a97b0a477 100644
--- a/blazor/file-upload/style-appearance.md
+++ b/blazor/file-upload/style-appearance.md
@@ -1,7 +1,7 @@
---
layout: post
title: File Upload Customization in Blazor File Upload Component | Syncfusion
-description: Learn how to customize the appearance of the Syncfusion Blazor File Upload component using CSS, including its container, buttons, content area, file list, and progress bar.
+description: Learn how to customize the appearance of the Syncfusion Blazor File Upload component using custom CSS style.
platform: Blazor
control: File Upload
documentation: ug
From 7f0cb4f66834e6ce1f79dbdd6aac42fd88e62f04 Mon Sep 17 00:00:00 2001
From: Yuvan111 <89587491+Yuvan111@users.noreply.github.com>
Date: Mon, 22 Sep 2025 16:36:46 +0530
Subject: [PATCH 007/194] 983306: Re-structing the form integration section of
File uploader.
---
blazor-toc.html | 1 +
blazor/file-upload/form-integration.md | 208 ++++++++++++++++++
.../images/blazor-uploader-dataform.gif | Bin 0 -> 329533 bytes
.../images/blazor-uploader-editform.gif | Bin 0 -> 347416 bytes
4 files changed, 209 insertions(+)
create mode 100644 blazor/file-upload/form-integration.md
create mode 100644 blazor/file-upload/images/blazor-uploader-dataform.gif
create mode 100644 blazor/file-upload/images/blazor-uploader-editform.gif
diff --git a/blazor-toc.html b/blazor-toc.html
index 5142102972..3df0e27b59 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -2914,6 +2914,7 @@
diff --git a/blazor/file-upload/form-integration.md b/blazor/file-upload/form-integration.md
new file mode 100644
index 0000000000..5309b16180
--- /dev/null
+++ b/blazor/file-upload/form-integration.md
@@ -0,0 +1,208 @@
+---
+layout: post
+title: Form Integration in Blazor File Upload Component | Syncfusion
+description: Learn how to integrate the Syncfusion Blazor File Upload component with Blazor's EditForm and DataForm for seamless form-based file management.
+platform: Blazor
+control: File Upload
+documentation: ug
+---
+
+# Form Integration in Blazor File Upload Component
+
+The Syncfusion Blazor File Upload component can be integrated with Blazor's `EditForm` and `DataForm` to build robust forms that include file-handling capabilities. This allows you to associate file uploads with a model and trigger validation.
+
+In a form, file validation is triggered by populating a model property when a file is selected and clearing it when removed. The `FileSelected` and `OnRemove` events are used for this purpose. When the form is submitted, the file can be uploaded manually to a server-side endpoint.
+
+## File Upload with EditForm Integration
+
+The File Upload component can be integrated into a Blazor `EditForm` to manage file uploads as part of your data entry process.
+
+To validate the file input, a model property is updated using the `FileSelected` and `OnRemove` events. The file upload is initiated only when the form is valid by calling the `UploadAsync` method in the `OnValidSubmit` event handler.
+
+### Uploading to a Server-Side API (Blazor WASM and Server)
+
+This example shows how to configure the File Upload component to send files to a server-side API endpoint upon form submission. This approach is compatible with both Blazor WebAssembly and Blazor Server applications.
+
+```cshtml
+@using System.ComponentModel.DataAnnotations
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfUploader UploadObj;
+
+ public class Employee
+ {
+ [Required(ErrorMessage = "Please upload a file")]
+ public List files { get; set; }
+ }
+
+ public Employee employee = new Employee();
+
+ public void OnSelect(SelectedEventArgs args)
+ {
+ this.employee.files = new List { new UploaderUploadedFiles { Name = args.FilesData[0].Name, Type = args.FilesData[0].Type, Size = args.FilesData[0].Size } };
+ }
+
+ public void OnRemove()
+ {
+ this.employee.files = null;
+ }
+
+ public async Task HandleValidSubmit()
+ {
+ // Upload the selected file manually only when the form is valid
+ await this.UploadObj.UploadAsync();
+ }
+}
+```
+
+### Saving Files Directly to the File System (Blazor Server Only)
+
+In a Blazor Server application, you can save uploaded files directly to the server's file system. The following example demonstrates how to use the `ValueChange` event to read the file stream and save it to a path.
+
+> This method writes files to the server's local file system and is only supported in Blazor Server applications. It will not work in a Blazor WebAssembly environment.
+
+```cshtml
+@using System.ComponentModel.DataAnnotations
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfUploader UploadObj;
+
+ public class Employee
+ {
+ [Required(ErrorMessage = "Please upload a file")]
+ public List files { get; set; }
+ }
+
+ public Employee employee = new Employee();
+
+ public void OnSelect(SelectedEventArgs args)
+ {
+ this.employee.files = new List { new UploaderUploadedFiles { Name = args.FilesData[0].Name, Type = args.FilesData[0].Type, Size = args.FilesData[0].Size } };
+ }
+
+ private async Task OnChange(UploadChangeEventArgs args)
+ {
+ foreach (var file in args.Files)
+ {
+ if (file.FileInfo != null && file.File != null)
+ {
+ var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.FileInfo.Name);
+ using FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
+ await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);
+ }
+ }
+ }
+
+ public void OnRemove()
+ {
+ this.employee.files = null;
+ }
+
+ public async Task HandleValidSubmit()
+ {
+ await this.UploadObj.UploadAsync();
+ }
+}
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNheNkBrgmbGBlgC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
+
+## File Upload with DataForm Integration
+
+The File Upload component can also be integrated into a Syncfusion `DataForm`, providing a streamlined way to create forms from a model. The example below shows how to save an uploaded file directly to the file system in a Blazor Server application when the form is submitted.
+
+> This file-saving approach is only compatible with Blazor Server applications.
+
+```cshtml
+@using Syncfusion.Blazor.DataForm
+@using System.ComponentModel.DataAnnotations
+@using Syncfusion.Blazor.Inputs
+@using System.IO
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfUploader UploadObj;
+
+ public class UserDataModel
+ {
+ [Required(ErrorMessage = "Please upload a file")]
+ public List files { get; set; }
+ }
+
+ private UserDataModel UserModel = new UserDataModel();
+
+ private async Task OnChange(UploadChangeEventArgs args)
+ {
+ foreach (var file in args.Files)
+ {
+ if (file.FileInfo != null && file.File != null)
+ {
+ var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.FileInfo.Name);
+ using FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
+ await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);
+ }
+ }
+ }
+
+ private void OnRemove()
+ {
+ this.UserModel.files = null;
+ }
+
+ private void OnSelect(SelectedEventArgs args)
+ {
+ this.UserModel.files = new List { new UploaderUploadedFiles { Name = args.FilesData[0].Name, Type = args.FilesData[0].Type, Size = args.FilesData[0].Size } };
+ }
+
+ private async Task Submit(object args)
+ {
+ await this.UploadObj.UploadAsync();
+ }
+}
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBSDaBVKlbHqfgu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
diff --git a/blazor/file-upload/images/blazor-uploader-dataform.gif b/blazor/file-upload/images/blazor-uploader-dataform.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3ab42eea9fc4bc2b375c8d4e926b23d7be4cbfe4
GIT binary patch
literal 329533
zcmeFYS6I{Qv-cfBLa#xplu)HAT|i18Aiatj5D*aQARtN+gwT8MHS{WkCPh$s@4br%
z(xmsA7uWi)z1QB?d+;1T*E2cEb^XrnduHyL&v!;q`LUR|i3Ro|)+q+?$6Uv-0M7^!
zeS}7ngs+Z>3@3>Fk4Z@BNlfNR-dvOESCPHBf!OX*NJdf%`OrEx(*`}gOU**>a>bCg
z&G`Nj%Ek$mdI5C_g?e@}6TW64KZ5j|ckN%Q?}jdd=V8Ke+QcRLdZ={wnMdPMF#Au!yMe_udhuDN$qR
z2_LQ#T6Pi>pC(rHCVsn0N={B{zDZN(ON(?%yS1#0bkunUDm!!K2K90h)p?zjm6a1y
zm0Mbo|3nK2RtpOYiwWb4dCQBP=Znj$-%QEdBWL
z-^&49D}*IKEJreTwPsVZ+yAFzP{;-zM1#Axi!ohW+?}Q
zxjhmL00Usg5NassK7q?>DG1)@$Hux12j+7S7#DB@;QbRDf5Ig2&!7JnB>&e1$^VOx
z|C0#0jT1Z!;1Zu+35{y;#iQUh=tgI?1(LCzCq^r~v
zPn004tQUG~N~X$<+d>#rKbOu_S&kJO_I>^|SL^VzH(j;1Y~hRR;pReLZTa_a-q?hU
zYIW!zZ9x<~M*VdaKf9t>RWsD;D_8rHglrc3>#Np=Q1DPj^@i$=vBD=MMgt8sTT|#)
zeHrRsK5x&}z1>fLXTCW9zZz|WJBaPud-qD%jsmo*=oSFn7J;XwSuG46`g|6eA7((ykWUI;K
z8>|tAi!Rf2hl}hKvfjTgbYh5-!;xEg*KjmO5Odz>WXO9hMvE6$AvvQNk8F$~P0-(T
zGUT~-r48b~UUFhcHjmKz^)CPDCt<36>$y49ZqQ0ay4T>jiuBNW&)U136>MUZkI_Aq
zEF`^zB{b>Cci>&Pbg!k%EKFtNUBXcnasIh;TTuZLF}m?CapiE}UHr-`lHy{chsx4F
z>o5c*r4={_O43^fE;eOIqES-GsdEC`^6Oy=TbUF3RNnXJmWd4SCluzip`%oab~V#R
z&UT-h?fSNBmjZZpYB$2ayr}<`uNqamIoWCd<>yzzH?{|Zm!HZ{Mg!h_y*k<2{g!r)
zi?#uhhS@dYBnCLN4)gUpSdz%}&$B@a9y@l>Sd{K}n#gunSTcIe8?>`Lf9%w=@VGsg
zO8WQGK_7n??_t02lZ$OKDCf^0qI97!}jTDRHY5wf_t~W`Dk4C
zx!v&u;>k8P#0AfeV#G+b4a_2q2{v9<^5;CXw2{;yYW3ySEKregF;^x0Bu769r;3Yn`tnchPRD
zDVdBfa!B0DPGK>z_dm?!my|)aK0jP@pM&&|X-eaHIJDpj-I2N6SDVVXJlGqYzF0$_
z?kh4gp__dOxM?CAfA