Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions blazor/file-upload/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Accessibility in Blazor File Upload Component | Syncfusion
description: Learn about accessibility features in the Syncfusion Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards.
title: Accessibility in Blazor File Upload Component | Syncfusion®
description: Learn about accessibility features in the Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards.
platform: Blazor
control: File Upload
documentation: ug
---

# Accessibility in Blazor File Upload Component

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 [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 File Upload component is outlined below:

Expand Down Expand Up @@ -58,4 +58,4 @@ The accessibility compliance of the File Upload component is shown in the follow

## See Also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Components](../common/accessibility)
* [Accessibility in Blazor Components](../common/accessibility)
6 changes: 3 additions & 3 deletions blazor/file-upload/async.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Asynchronous Upload in Blazor File Upload Component | Syncfusion
description: Checkout and learn here all about Asynchronous Upload in Syncfusion Blazor File Upload component and more.
title: Asynchronous Upload in Blazor File Upload Component | Syncfusion®
description: Checkout and learn here all about Asynchronous Upload in Blazor File Upload component and much more details.
platform: Blazor
control: File Upload
documentation: ug
Expand Down Expand Up @@ -155,7 +155,7 @@ public void Remove(IList<IFormFile> UploadFiles)

## 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.
The Blazor 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

Expand Down
6 changes: 3 additions & 3 deletions blazor/file-upload/chunk-upload.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Chunk Upload in Blazor File Upload Component | Syncfusion
description: Checkout and learn here all about Chunk Upload in Syncfusion Blazor File Upload component and much more.
title: Chunk Upload in Blazor File Upload Component | Syncfusion®
description: Checkout and learn here all about Chunk Upload in Blazor File Upload component and and much more details.
platform: Blazor
control: File Upload
documentation: ug
Expand All @@ -11,7 +11,7 @@ documentation: ug

### Description

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.
Chunk Upload in the 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.

**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.

Expand Down
4 changes: 2 additions & 2 deletions blazor/file-upload/drag-and-drop.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Drag and Drop in Blazor File Upload Component | Syncfusion
description: Learn about drag-and-drop file selection, configuring an external drop area, and related behaviors in the Syncfusion Blazor File Upload component.
title: Drag and Drop in Blazor File Upload Component | Syncfusion®
description: Learn about drag-and-drop file selection, configuring an external drop area, and related behaviors in the Blazor File Upload component.
platform: Blazor
control: File Upload
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/file-upload/file-source.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: File Source in Blazor File Upload Component | Syncfusion
description: Checkout and learn here all about File Source in Syncfusion Blazor File Upload component and much more.
title: File Source in Blazor File Upload Component | Syncfusion®
description: Checkout and learn here all about File Source in Blazor File Upload component and and much more details.
platform: Blazor
control: File Upload
documentation: ug
Expand Down
6 changes: 3 additions & 3 deletions blazor/file-upload/file-upload-configuration.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: File Upload Configuration in Blazor File Upload Component | Syncfusion
description: Checkout and learn here all about File Upload Configuration in Syncfusion Blazor File Upload component and much more.
title: File Upload Configuration in Blazor File Upload | Syncfusion®
description: Checkout and learn here all about File Upload Configuration in Blazor File Upload component and and much more details.
platform: Blazor
control: File Upload
documentation: ug
---

# File Upload Configuration

The Syncfusion Blazor FileUpload component offers a wide range of properties to configure its behavior and appearance.
The Blazor FileUpload component offers a wide range of properties to configure its behavior and appearance.

## ID

Expand Down
8 changes: 4 additions & 4 deletions blazor/file-upload/file-upload-methods.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: File Upload Methods in Blazor File Upload Component | Syncfusion
description: Learn about file upload methods in Syncfusion Blazor, including GetFileDetails, UploadAsync, CancelAsync, and ClearAllAsync.
title: File Upload Methods in Blazor File Upload Component | Syncfusion®
description: Checkout and learn about file upload methods in Blazor, including GetFileDetails, UploadAsync, CancelAsync, and ClearAllAsync.
platform: Blazor
control: File Upload
documentation: ug
---

# File Upload Methods in Syncfusion Blazor Uploader
# File Upload Methods in Blazor Uploader

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

## GetFileDetails

Expand Down
10 changes: 5 additions & 5 deletions blazor/file-upload/form-integration.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
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.
title: Form Integration in Blazor File Upload Component | Syncfusion®
description: Learn how to integrate the 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 seamlessly integrates with Blazor's [EditForm](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-9.0) and the Syncfusion [DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app), enabling you to build robust forms with file upload functionality. This integration associates the uploaded file information with a data model, leveraging the form's built-in validation.
The Blazor File Upload component seamlessly integrates with Blazor's [EditForm](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-9.0) and the [DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app), enabling you to build robust forms with file upload functionality. This integration associates the uploaded file information with a data model, leveraging the form's built-in validation.

When a file is selected, its information is added to the model property bound to the component. Upon form submission, the entire model, including the list of selected files, is passed to the submit event handler.

Expand Down Expand Up @@ -81,7 +81,7 @@ When the form is successfully submitted, the `OnValidSubmit` event handler recei

## File Upload with DataForm Integration

The File Upload component can also be integrated into a Syncfusion `DataForm` to automatically build a form from a model that includes file upload capabilities.
The File Upload component can also be integrated into a `DataForm` to automatically build a form from a model that includes file upload capabilities.

When the `DataForm` is submitted, the [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit) event handler receives the `EditContext`. The `EditContext.Model` property contains the complete form data, including the list of `FileInfo` objects from the File Upload component. This allows you to access and process the file information as part of the form's submission logic.

Expand Down Expand Up @@ -148,4 +148,4 @@ When the `DataForm` is submitted, the [OnSubmit](https://help.syncfusion.com/cr/
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheWNXGeJtxWIXQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload component within a Syncfusion DataForm.](./images/blazor-uploader-dataform.gif)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheWNXGeJtxWIXQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload component within a DataForm](./images/blazor-uploader-dataform.gif)" %}
Loading