Class SfUploader

The uploader component is useful to upload images, documents, and other files to server. The component is the extended version of HTML5 that is uploaded with multiple file selection, auto upload, drag and drop, progress bar, preload files, and validation.

Inheritance

System.Object

SfBaseComponent

SfUploader

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnAfterRenderAsync(Boolean)

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfUploader : SfBaseComponent

Constructors

SfUploader()

Declaration

public SfUploader()

Properties

AllowedExtensions

Gets or sets the extensions of the file types allowed in the Uploader component, passing the extensions with the comma separators.

Declaration

public string AllowedExtensions { get; set; }

Property Value

Type	Description
System.String	Accepts the string value. The default value is empty.

Remarks

For example, if you want to upload specific image files, pass the property as ".jpg" and ".png."

Examples

@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles" AllowedExtensions=".jpg, .png">
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove"/>
</SfUploader>

AllowMultiple

Gets or sets a value that indicates whether the multiple files can be browsed or dropped simultaneously in the SfUploader component.

Declaration

public bool AllowMultiple { get; set; }

Property Value

Type	Description
System.Boolean	true, if the multiple file options can be enabled. Otherwise, false. The default value is true.

AutoUpload

Gets or sets whether the SfUploader component initiates automatic upload after the files are selected.

Declaration

public bool AutoUpload { get; set; }

Property Value

Type	Description
System.Boolean	true, if the automatic upload option can be enabled in component. Otherwise, false. The default value is true.

Remarks

If you want to manipulate the files before uploading to server, disable the AutoUpload property.

CssClass

Gets or sets one or more CSS classes that can be used to customize the appearance of a file upload component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts the CSS class string separated by space to customize the appearance of component.

Remarks

One or more custom CSS classes can be added to a file upload.

DirectoryUpload

Gets or sets a value indicating whether the folder of files can be browsed in the file upload component.

Declaration

public bool DirectoryUpload { get; set; }

Property Value

Type	Description
System.Boolean	true, if the directory upload option can be enabled. Otherwise, false.

DropArea

Gets or sets the custom file drop target element selectors to handle file upload on drag-and-drop action.

Declaration

public string DropArea { get; set; }

Property Value

Type	Description
System.String	Accepts the target element selector string.

Remarks

By default, the file upload component creates a container element around the file input that will act as a drop target.

Examples

@using Syncfusion.Blazor.Inputs
<SfUploader DropArea="#CustomDropArea" >
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" />
</SfUploader>
<div id="CustomDropArea" style="width:200px; height:200px; border:dashed 1px" ></div>

DropEffect

Gets or sets the cursor displayed while dragging the file into the SfUploader component. It indicates which type of operation will occur.

Declaration

public DropEffect DropEffect { get; set; }

Property Value

Type	Description
DropEffect	One of the DropEffect enumeration that specifies the drag operation for the component. The default value is Default.

Remarks

The DropEffect property can be set to one of the following values:

• Copy
• Move
• Link
• None

Examples

@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles" DropEffect="DropEffect.Copy">
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" />
</SfUploader>

Enabled

Gets or sets a value that indicates whether the SfUploader component allows the user to interact with it.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	true, allow the user to interact with component. Otherwise, false. The default value is true.

EnableHtmlSanitizer

Gets or sets whether to prevent the cross site scripting code in filename or not.

Declaration

public bool EnableHtmlSanitizer { get; set; }

Property Value

Type	Description
System.Boolean	true, if the component prevents the cross site scripting code in filename; otherwise,false. The default value is true.

Remarks

The Enable HtmlSanitizer property removes the cross-site scripting code or functions from the filename and shows the validation error message to the user.

EnablePersistence

Gets or sets a value indicating whether the persisting file upload state on page reload. If enabled, the state of the uploaded or selected files will be persisted.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, if the persistence can be enabled. Otherwise, false. The default value is false.

EnableRtl

Gets or sets a value indicating whether the SfUploader component is rendered in right-to-left direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, if the right to left direction can be enabled for the component. Otherwise, false. The default value is false.

HtmlAttributes

Gets or sets an additional html attributes such as styles, class, and more to add the root element.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A dictionary of additional HTML attributes for the root element of the component.

Remarks

If you configured both property and equivalent html attributes, the component considers the property value.

Examples

@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles" HtmlAttributes="@HtmlAttribute">
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" />
</SfUploader>
@code {
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>() {
    {"disabled","true" }
    };
 }

HttpClientInstance

Gets or sets the System.Net.Http.HttpClient instance used by the SfUploader component
for performing upload and remove operations.

Declaration

public HttpClient HttpClientInstance { get; set; }

Property Value

Type	Description
System.Net.Http.HttpClient	The System.Net.Http.HttpClient instance that handles HTTP requests for the SfUploader component. If not set, the component will use the globally injected System.Net.Http.HttpClient instance from the application.

Remarks

Use this property to bind a custom System.Net.Http.HttpClient instance to the SfUploader component. This allows for centralized management of HTTP configurations such as headers, base addresses, and timeouts,
ensuring consistent HTTP settings across your application.

If HttpClientInstance is not specified, the component defaults to using the globally injected System.Net.Http.HttpClient instance provided in the application�s Program.cs or Startup.cs.

Examples

 
@inject HttpClient httpClient; 
 
 
 
 

This example demonstrates setting the HttpClientInstance property to a globally injected
System.Net.Http.HttpClient instance, enabling shared HTTP configurations within the SfUploader component.

ID

Gets the ID of the Uploader component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

InputAttributes

Gets or sets an additional input attributes such as disabled, value, and more to add the input file element.

Declaration

public Dictionary<string, object> InputAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A dictionary of additional input attributes for the root element of the component.

Remarks

If you configured both property and equivalent input attribute, the component considers the property value.

MaxFileSize

Gets or sets the maximum allowed file size to be uploaded in bytes.

Declaration

public double MaxFileSize { get; set; }

Property Value

Type	Description
System.Double	Accepts the double value representing that the maximum file size for the component. The default value is 30000000.

Remarks

The property used to make sure that you cannot upload too large files.

MinFileSize

Gets or sets the minimum file size to be uploaded in bytes.

Declaration

public double MinFileSize { get; set; }

Property Value

Type	Description
System.Double	Accepts the double value representing that the minimum file size for the component.

SequentialUpload

Gets or sets a value that indicates whether the SfUploader component is processing the multiple files simultaneously or not.

Declaration

public bool SequentialUpload { get; set; }

Property Value

Type	Description
System.Boolean	true, if the sequential upload option can be enabled in component. Otherwise, false.

Remarks

If SequentialUpload property is enabled, the file upload component performs the upload one after the other.

ShowFileList

Gets or sets a value that indicates whether the file list can be rendered or not.

Declaration

public bool ShowFileList { get; set; }

Property Value

Type	Description
System.Boolean	true, if the file list should be shown. otherwise, false. The default value is true.

Remarks

The property used to prevent default file list and design own template for file list using Template.

ShowProgressBar

Gets or sets a value indicating whether to show the progress bar while uploading a file.

Declaration

public bool ShowProgressBar { get; set; }

Property Value

Type	Description
System.Boolean	true if the progress bar should be shown; otherwise, false. The default value is true.

TabIndex

Gets or sets the tab order of the component.

Declaration

public int TabIndex { get; set; }

Property Value

Type	Description
System.Int32	An integer value representing the tab index of Uploader component.

Template

Gets or sets a template that is used to customize the content of each file in the list.

Declaration

public RenderFragment<FileInfo> Template { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<FileInfo>	The template content. The default value is null.

Examples

@using Syncfusion.Blazor.Inputs
@inject HttpClient Http
<SfUploader ID="UploadFiles" DropEffect="DropEffect.Copy">
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove"/>
    <UploaderTemplates>
        <Template Context="HttpContext">
            <div style="padding: 7px;">
                <h5 title="@(HttpContext.Name)">@(HttpContext.Name)</h5>
                <i>@(HttpContext.Size) Bytes</i>
            </div>
        </Template>
    </UploaderTemplates>
</SfUploader>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

BytesToSizeAsync(Double)

It is used to convert bytes value into kilobytes or megabytes depending on the size based on binary prefix.

Declaration

public Task<string> BytesToSizeAsync(double bytes)

Parameters

Type	Name	Description
System.Double	bytes	Specifies the file size in bytes.

Returns

Type	Description
System.Threading.Tasks.Task<System.String>	Task.

CancelAsync(FileInfo[])

Stops the in-progress chunked upload based on the file data. When the file upload is canceled, the partially uploaded file is removed from server.

Declaration

public Task CancelAsync(FileInfo[] fileData = null)

Parameters

Type	Name	Description
FileInfo[]	fileData	specifies the files data to cancel the progressing file.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

ClearAllAsync()

Clear all the file entries from list that can be uploaded files or added in upload queue.

Declaration

public Task ClearAllAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Task.

GetFileDetails(List<FileInfo>)

Task which retrieves the file data.

Declaration

public Task GetFileDetails(List<FileInfo> file)

Parameters

Type	Name	Description
System.Collections.Generic.List<FileInfo>	file	Specifies the file.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

GetFilesDataAsync(Nullable<Double>)

Get the data of files which are shown in file list.

Declaration

public Task<List<FileInfo>> GetFilesDataAsync(Nullable<double> index = null)

Parameters

Type	Name	Description
System.Nullable<System.Double>	index	Specifies the index.

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<FileInfo>>	Task.

PauseAsync(List<FileInfo>, Nullable<Boolean>)

Pauses the in-progress chunked upload based on the file data.

Declaration

public Task PauseAsync(List<FileInfo> fileData = null, Nullable<bool> custom = null)

Parameters

Type	Name	Description
System.Collections.Generic.List<FileInfo>	fileData	specifies the files data to pause from uploading.
System.Nullable<System.Boolean>	custom	Set true if used custom UI.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

RemoveAsync(FileInfo[], Nullable<Boolean>, Nullable<Boolean>, Nullable<Boolean>, Object)

Remove the uploaded file from server manually by calling the remove URL action.

If you pass an empty argument to this method, the complete file list can be cleared, otherwise remove the specific file based on its argument ("file_data").

Declaration

public Task RemoveAsync(FileInfo[] fileData = null, Nullable<bool> customTemplate = null, Nullable<bool> removeDirectly = null, Nullable<bool> postRawFile = null, object args = null)

Parameters

Type	Name	Description
FileInfo[]	fileData	specifies the files data to remove from file list/server.
System.Nullable<System.Boolean>	customTemplate	Set true if the component rendering with customize template.
System.Nullable<System.Boolean>	removeDirectly	Set true if files remove without removing event.
System.Nullable<System.Boolean>	postRawFile	Set false, to post file name only to the remove action.
System.Object	args

Returns

Type	Description
System.Threading.Tasks.Task	Task.

ResumeAsync(FileInfo[], Nullable<Boolean>)

Resumes the chunked upload that is previously paused based on the file data.

Declaration

public Task ResumeAsync(FileInfo[] fileData = null, Nullable<bool> custom = null)

Parameters

Type	Name	Description
FileInfo[]	fileData	specifies the files data to resume the paused file.
System.Nullable<System.Boolean>	custom

Returns

Type	Description
System.Threading.Tasks.Task	Task.

RetryAsync(FileInfo[], Nullable<Boolean>, Nullable<Boolean>)

Retries the canceled or failed file upload based on the file data.

specifies the files data to retry the canceled or failed file Set true to retry from canceled stage and set false to retry from initial stage.

Declaration

public Task RetryAsync(FileInfo[] fileData = null, Nullable<bool> fromcanceledStage = null, Nullable<bool> custom = null)

Parameters

Type	Name	Description
FileInfo[]	fileData
System.Nullable<System.Boolean>	fromcanceledStage
System.Nullable<System.Boolean>	custom

Returns

Type	Description
System.Threading.Tasks.Task	Task.

SortFileListAsync(FileInfo[])

Allows you to sort the file data alphabetically based on its file name clearly.

Declaration

public Task<List<FileInfo>> SortFileListAsync(FileInfo[] filesData = null)

Parameters

Type	Name	Description
FileInfo[]	filesData	specifies the files data for upload.

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<FileInfo>>	Task.

UploadAsync(FileInfo[], Nullable<Boolean>)

Allows you to call the upload process manually by calling save URL action.

To process the selected files (added in upload queue), pass an empty argument otherwise upload the specific file based on its argument.

Declaration

public Task UploadAsync(FileInfo[] files = null, Nullable<bool> custom = null)

Parameters

Type	Name	Description
FileInfo[]	files	specifies the files data for upload.
System.Nullable<System.Boolean>	custom	specifies the custom files.

Returns

Type	Description
System.Threading.Tasks.Task	Task.