Search results

Getting started with Blazor File Upload component

08 Apr 2021 / 5 minutes to read

This section briefly explains about how to include a Blazor File Upload Component in your Blazor Server-Side and Client-Side application. You can refer to our Getting Started with Blazor Server-Side File Upload and Blazor WebAssembly File Upload documentation pages for configuration specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.Blazor.Inputs NuGet package to the application by using the NuGet Package Manager.

Please ensure to check the Include prerelease option for our Beta release.

  • You can add the client-side resources through CDN or from NuGet package in the HEAD element of the ~/Pages/_Host.cshtml page.
Copied to clipboard
<head>
       <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
       <!-- <link href="https://cdn.syncfusion.com/blazor/{{version}}/styles/{{theme}}.css" rel="stylesheet" /> -->
</head>

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

Copied to clipboard
<head>
   <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
   <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.Blazor.Inputs packages.

Copied to clipboard
@using Syncfusion.Blazor.Inputs

Add SyncfusionBlazor service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

Copied to clipboard
using Syncfusion.Blazor;

namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.

Copied to clipboard
<head>
       <script src="https://cdn.syncfusion.com/blazor/18.4.42/syncfusion-blazor.min.js"></script>
</head>

Adding uploader component to the application

To initialize the uploader component add the below code to your Index.razor view page which is present under ~/Pages folder.

Copied to clipboard
<SfUploader></SfUploader>

Run the application

After successful compilation of your application, press F5 to run the application.

The output will be as follows.

Uploader Sample

Without server-side API endpoint

You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using AsyncSettings.

Save and Remove actions

You can get the uploaded files as file stream in the ValueChange event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Please find the save action code on below.

Copied to clipboard
@using System.IO

<SfUploader AutoUpload="false">
<UploaderEvents ValueChange="OnChange"></UploaderEvents>
</SfUploader>

@code {

private void OnChange(UploadChangeEventArgs args)
{
    foreach (var file in args.Files)
    {
        var path = @"path" + file.FileInfo.Name;
        FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
        file.Stream.WriteTo(filestream);
        filestream.Close();
        file.Stream.Close();
    }
}
}

The output will be as follows.

Uploader Output

While clicking on the remove icon in the file list, you will get the OnRemove event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Please find the remove action code on below.

Copied to clipboard
Private void onRemove(RemovingEventArgs args)
{
foreach(var removeFile in args.FilesData)
{
    if (File.Exists(Path.Combine(@"rootPath", removeFile.Name)))
    {
        File.Delete(Path.Combine(@"rootPath", removeFile.Name))
    }
}
}

With server-side API endpoint

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 save action handler upload the files that needs to be specified in the SaveUrl property.

The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon.

The remove action is optional. The remove action handler removes the files that needs to be specified in the RemoveUrl property.

Copied to clipboard
[Route("api/[controller]")]

private IHostingEnvironment hostingEnv;

public SampleDataController(IHostingEnvironment env)
{
   this.hostingEnv = env;
}

[HttpPost("[action]")]
public void Save(IList<IFormFile> UploadFiles)
{
   long size = 0;
   try
   {
       foreach (var file in UploadFiles)
       {
           var filename = ContentDispositionHeaderValue
                   .Parse(file.ContentDisposition)
                   .FileName
                   .Trim('"');
               filename = hostingEnv.ContentRootPath + $@"\{filename}";
               size += (int)file.Length;
           if (!System.IO.File.Exists(filename))
           {
               using (FileStream fs = System.IO.File.Create(filename))
               {
                   file.CopyTo(fs);
                   fs.Flush();
               }
           }
       }
   }
   catch (Exception e)
   {
       Response.Clear();
       Response.StatusCode = 204;
       Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
       Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
   }
}
[HttpPost("[action]")]
public void Remove(IList<IFormFile> UploadFiles)
{
   try
   {
       var filename = hostingEnv.ContentRootPath + $@"\{UploadFiles[0].FileName}";
       if (System.IO.File.Exists(filename))
       {
           System.IO.File.Delete(filename);
       }
   }
   catch (Exception e)
   {
       Response.Clear();
       Response.StatusCode = 200;
       Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully";
       Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
   }
}
Copied to clipboard
<SfUploader ID="UploadFiles">
<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove"></UploaderAsyncSettings>
</SfUploader>

Configure allowed file types

You can allow the specific files alone to upload using the AllowedExtensions property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element.

Copied to clipboard
<SfUploader AllowedExtensions=".doc, docx, .xls, xlsx"></SfUploader>

The output will be as follows.

Uploader AllowedExtensions

You can also explore our Blazor File Upload example to understand how to browse the files which you want to upload to the server.

See Also