Merge pull request #6933 from syncfusion-content/BLAZ-983104-fileuploader

Updated the UG Documentation for file-upload

Author: UdhayaKumarDuraisamy

blazor/file-upload/accessibility.md

@@ -9,7 +9,7 @@ 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 [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) component adheres to accepted 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) commonly used to evaluate accessibility. The component provides ARIA-compliant structures for buttons and status updates to ensure compatibility with screen readers and assistive technologies.
 
 The accessibility compliance for the Blazor Uploader component is outlined below.
 
@@ -32,26 +32,26 @@ The accessibility compliance for the Blazor Uploader component is outlined below
 </style>
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not fully meet the requirement.</div>
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
 ## Keyboard interaction
 
-The Blazor Uploader component characterized with complete ARIA accessibility support that helps to be accessible by on-screen readers and other assistive technology devices.
+The Blazor Uploader component includes complete ARIA support for operation with screen readers and other assistive technologies. Focus moves predictably through interactive elements such as the browse button, file list items, and action buttons (remove, retry, and clear). Status updates (for example, upload progress and error messages) are exposed to assistive technologies.
 
-The following are the standard keys that works on uploader component:
+The following are the standard keys that work in the Uploader component:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Move focus to next element. |
-| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus to previous element. |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Triggers corresponding action to button element. |
-| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Close the file browser dialog alone and cancels the upload on drop the file. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Move focus to the next focusable element. |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus to the previous focusable element. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Invoke the action of the focused button or control. |
+| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Close only the file browser dialog and cancel an in-progress upload when a file is being dropped. |
 
 ## 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 Uploader component's accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. The component supports ARIA attributes, roles, and live region announcements for status changes to improve the experience for screen reader users. Text labels, button tooltips, and status messages can be localized to support accessibility across languages and regions.
 
 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.
 

blazor/file-upload/async.md

@@ -9,17 +9,17 @@ 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 supports asynchronous file uploads. The upload workflow uses Save and Remove action URLs to communicate with server endpoints that handle file persistence and deletion.
+* The Save action is required to receive and store uploaded files on the server.
+* The Remove action is optional and is used to delete files 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 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.
 
 ## Multiple file upload
 
-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.
+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
 
@@ -42,6 +42,8 @@ By Default, the uploader component allows you to select and upload multiple file
 ```
 ### Without server-side API endpoint
 
+The following pattern processes selected files without calling server endpoints. This approach writes files directly from the application process and is suitable only for controlled or sample scenarios. In production, validate file types and sizes, generate unique file names, and write to a dedicated, secure directory.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles">
@@ -74,9 +76,9 @@ By Default, the uploader component allows you to select and upload multiple file
 
 ## Single file upload
 
-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.
+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.
 
-The following example explains about single file upload settings.
+The following example demonstrates single file upload settings.
 
 ### With server-side API endpoint
 
@@ -93,6 +95,8 @@ The following example explains about single file upload settings.
 
 ### Without server-side API endpoint
 
+Use this approach for local processing only (e.g., demos). In production, validate inputs, limit file size, and sanitize file names and paths.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" AllowMultiple=false>
@@ -144,6 +148,8 @@ By default, the uploader processes the files to upload once the files are select
 ```
 ### Without server-side API endpoint
 
+This example shows manual upload without calling backend endpoints. Ensure proper validation and storage practices when adapting for real applications.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" AllowMultiple=false AutoUpload=false>
@@ -198,6 +204,8 @@ By default, the uploader component process multiple files to upload simultaneous
 
 ### Without server-side API endpoint
 
+This example uploads files sequentially without calling backend endpoints. Apply size limits, validate file types, and handle errors when adapting for production.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" SequentialUpload=true AutoUpload=false>
@@ -252,6 +260,8 @@ The uploader component allows you to pre-load the list of files that are uploade
 
 ### Without server-side API endpoint
 
+This example shows how to render preloaded files without server endpoints. In practical scenarios, ensure that preloaded entries accurately reflect files available on the server and that removal operations are handled securely.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" AutoUpload=false>
@@ -288,4 +298,4 @@ The uploader component allows you to pre-load the list of files that are uploade
 
 ## See Also
 
-* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor)
+* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor)