Skip to content

Commit dd08762

Browse files
UdhayaKumarDuraisamyUdhayaKumarDuraisamy
authored
Merge pull request #6970 from syncfusion-content/BLAZ-982992-fileupload-config-new
Docs(BLAZ-982992): Revamp FileUpload documentation(file-upload/file-upload-configuration.md)
2 parents 8e19a36 + c67f179 commit dd08762

File tree

5 files changed

+267
-0
lines changed

5 files changed

+267
-0
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2991,6 +2991,7 @@
29912991
</ul>
29922992
</li>
29932993
<li> <a href="/blazor/file-upload/async">Asynchronous Upload</a></li>
2994+
<li> <a href="/blazor/file-upload/file-upload-configuration">FileUpload Configuration</a></li>
29942995
<li> <a href="/blazor/file-upload/file-upload-methods">FileUpload Methods</a></li>
29952996
<li> <a href="/blazor/file-upload/accessibility">Accessibility</a></li>
29962997
<li> <a href="/blazor/file-upload/chunk-upload">Chunk Upload</a></li>

‎blazor/file-upload/file-upload-configuration.md‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
---
2+
layout: post
3+
title: File Upload Configuration in Blazor File Upload Component | Syncfusion
4+
description: Checkout and learn here all about File Upload Configuration in Syncfusion Blazor File Upload component and much more.
5+
platform: Blazor
6+
control: File Upload
7+
documentation: ug
8+
---
9+
10+
# File Upload Configuration
11+
12+
The Syncfusion Blazor FileUpload component offers a wide range of properties to configure its behavior and appearance.
13+
14+
## ID
15+
16+
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.
17+
18+
## Code Example
19+
20+
```cshtml
21+
<SfUploader ID="myFileUploadComponent" name="UploadFiles" />
22+
```
23+
24+
> Note: Ensure the `ID` is unique across your application. When using AsyncSettings, the `name` must match the controller's save method parameter name.
25+
26+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjryjYhTgSOYvHEJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
27+
28+
---
29+
30+
## AllowedExtensions
31+
32+
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.
33+
34+
## Code Example
35+
36+
```cshtml
37+
<SfUploader AllowedExtensions=".jpg,.jpeg,.png,.gif" />
38+
```
39+
40+
>Note: Multiple extensions should be separated by commas.
41+
42+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryjOhzKHgiZDmV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
43+
44+
---
45+
46+
## AllowMultiple
47+
48+
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.
49+
50+
## Code Example
51+
52+
```cshtml
53+
<SfUploader AllowMultiple="true" />
54+
```
55+
56+
>Note: When `AllowMultiple` is `false`, only one file can be selected at a time.
57+
58+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htVojOhTKxefALsN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
59+
60+
---
61+
62+
## AutoUpload
63+
64+
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.
65+
66+
## Code Example
67+
68+
```cshtml
69+
<SfUploader AutoUpload="true" />
70+
```
71+
72+
If [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is `false`, you'll typically need to upload a file manually on upload button click.
73+
74+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrStOhTKnuyPkKt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
75+
76+
---
77+
78+
## SequentialUpload
79+
80+
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.
81+
82+
## Code Example
83+
84+
```cshtml
85+
<SfUploader AllowMultiple="true" SequentialUpload="true" />
86+
```
87+
88+
>Note: This property is only effective when `AllowMultiple` is `true`.
89+
90+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhSjkLpqQTZKrlg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
91+
92+
---
93+
94+
## DirectoryUpload
95+
96+
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.
97+
98+
## Code Example
99+
100+
```cshtml
101+
<SfUploader DirectoryUpload="true" />
102+
```
103+
104+
>Note: Browser support for directory upload may vary.
105+
106+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeDOBfgceWwSNY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
107+
108+
---
109+
110+
## Enabled
111+
112+
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.
113+
114+
## Code Example
115+
116+
```cshtml
117+
<SfUploader Enabled="false" />
118+
```
119+
120+
>Note: When disabled, users cannot interact with the upload area.
121+
122+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLeNkVfKcOhxybv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
123+
124+
---
125+
126+
## MaxFileSize
127+
128+
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.
129+
130+
## Code Example
131+
132+
```cshtml
133+
<SfUploader MaxFileSize="5242880" /> @* 5 MB *@
134+
```
135+
136+
>Note: The value is in bytes. Make sure your server-side configuration also handles maximum file sizes appropriately.
137+
138+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htVStkLpqlnsPFdX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
139+
140+
141+
---
142+
143+
## MinFileSize
144+
145+
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.
146+
147+
## Code Example
148+
149+
```cshtml
150+
<SfUploader MinFileSize="1024" /> @* 1 KB *@
151+
```
152+
153+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVotaVTUYsmdyXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
154+
155+
---
156+
157+
## EnableHtmlSanitizer
158+
159+
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.
160+
161+
## Code Example
162+
163+
```cshtml
164+
<SfUploader EnableHtmlSanitizer="true" />
165+
```
166+
167+
>Note: It's recommended to keep this property `true` for security reasons, especially in public-facing applications.
168+
169+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeNYVfUOhomymd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
170+
171+
## EnablePersistence
172+
173+
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.
174+
175+
## Code Example
176+
177+
```cshtml
178+
<SfUploader EnablePersistence="true" ID="UploadFiles" >
179+
</SfUploader>
180+
```
181+
182+
>Note: Requires unique `ID` for proper functionality.
183+
184+
---
185+
186+
## EnableRtl
187+
188+
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.
189+
190+
## Code Example
191+
192+
```cshtml
193+
<SfUploader EnableRtl="true" />
194+
```
195+
196+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhINEhJpCTkMvdI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
197+
198+
---
199+
200+
## HtmlAttributes
201+
202+
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.
203+
204+
## Code Example
205+
206+
```cshtml
207+
<SfUploader HtmlAttributes="@(new Dictionary<string, object>() { { "data-custom-attribute", "fileupload-data" }, { "class", "my-custom-uploader" } })" />
208+
```
209+
210+
>Note: This property accepts a `Dictionary<string, object>`.
211+
212+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoDYrpTrbUcwZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
213+
214+
---
215+
216+
## InputAttributes
217+
218+
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.
219+
220+
## Code Example
221+
222+
```cshtml
223+
<SfUploader InputAttributes="@(new Dictionary<string, object>() { { "accept", "image/*" } })" />
224+
```
225+
226+
>Note: This property accepts a `Dictionary<string, object>`. Be cautious not to override essential attributes managed by the component.
227+
228+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBetuhfzUNEgeqP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
229+
230+
---
231+
232+
## TabIndex
233+
234+
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.
235+
236+
## Code Example
237+
238+
```cshtml
239+
<input type="text" TabIndex="1" /><br />
240+
<SfUploader TabIndex="2" />
241+
<input type="text" TabIndex="3" />
242+
```
243+
244+
>Note: A value of 0 means the element will be focused in the default tab order. Negative values remove the element from the tab order.
245+
246+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhotYhzzqUHHLgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
247+
248+
249+
## Preloaded files
250+
251+
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.
252+
253+
## Code Example
254+
255+
```cshtml
256+
<SfUploader>
257+
<UploaderFiles>
258+
<UploaderUploadedFiles Name="Nature" Size=500000 Type=".png"></UploaderUploadedFiles>
259+
<UploaderUploadedFiles Name="TypeScript Succinctly" Size=12000 Type=".pdf"></UploaderUploadedFiles>
260+
<UploaderUploadedFiles Name="ASP.NET Webhooks" Size="500000" Type=".docx"></UploaderUploadedFiles>
261+
</UploaderFiles>
262+
</SfUploader>
263+
```
264+
265+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBytuBzpzikFnSt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
266+

‎blazor/file-upload/images/AllowMultiple.gif‎

102 KB
Loading

‎blazor/file-upload/images/AllowedExtension.gif‎

231 KB
Loading

‎blazor/file-upload/images/AutoUpload.gif‎

90.8 KB
Loading

0 commit comments

Comments
 (0)