Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (152).NET Core  (26)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (29)Blazor  (107)DocIO  (20)Essential JS 2  (72)Essential Studio  (164)File Formats  (20)Flutter  (115)JavaScript  (150)Microsoft  (102)PDF  (59)React  (33)Succinctly series  (124)Syncfusion  (490)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (27)Windows Forms  (55)WinUI  (27)WPF  (123)Xamarin  (132)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (108)Chart  (53)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (50)Development  (263)Doc  (7)DockingManager  (1)eBook  (94)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (15)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (233)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (25)Performance  (7)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (29)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (10)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (65)UI  (139)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (13)Web  (227)What's new  (146)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Simple Steps to Upload Blazor Files to Azure Blob Storage

Simple Steps to Upload Files to Azure Blob Storage in Blazor App

Cloud storage is a service that allows users to store any digital files in a remote server, from which they can be easily accessed by any device.

Azure Blob Storage is a service that enables you to upload and store large amounts of files in the cloud. It allows you to store your data cost-effectively while keeping it easily accessible using code or a direct storage client library.

Our Syncfusion Blazor File Upload component can help upload one or more images, documents, audio, video, and other files to a server. It is an extended version of the HTML 5 upload component (<input type=” file”>). Its rich feature set includes multiple-file selection, progress bars, auto uploading, drag and drop, folder (directory) uploading, file validation, and more.

In this article, we will learn how to upload files to Azure Blob Storage using the Syncfusion Blazor File Upload component by looking at code examples.

We are going to divide the article into the following sections:

Prerequisites

Creating Azure storage

First, sign in to the Azure portal to create a storage account. If you don’t have a subscription, create a free subscription account and follow these steps:

Step 1: Select the Storage accounts option from the portal menu at the top.

Select the Storage accounts optionStep 2: Then, on the Storage accounts page, select Create.

On the Storage accounts page, select CreateOptions for your new storage account will be listed on the Create a storage account page.

Create a storage account pageStep 3: In the Basics tab, provide the following basic details of your storage account:

  • The existing resource group (or create a new one).
  • The name of your storage account.
  • The region, performance, and redundancy.

Fill up the details in the Create a storage account page

Note: The check box Make read access to data available in the event of regional unavailability will be checked by default.

Step 4: In the other tabs, don’t change anything. Click Next until you reach the Review+Create tab. Then, your validation will pass. Refer to the following screenshot.

Validation passed successfully

Note: For more details about the options in the other tabs, refer to Create a storage account documentation.

Step 5: Now, click the Create and wait for the deployment to complete. After deployment, you will see a screen like in the following screenshot.

Click the Create button and wait for some time to complete deploymentStep 6: After successful deployment, click Go to resource to see your storage.

Click on the Go to resource optionNow, your storage will look like the following screenshot.

Created Storage AccountStep 7: From the left portal menu, select Access keys and copy your Key and Connection string. We will use them later in our application. Select the Access keys option to get your keys and connection string.

Upload files to Azure with ASP.NET Core-hosted Blazor WebAssembly (WASM)

Create an ASP.NET Core-hosted Blazor WebAssembly app and add the required model and controller classes. We now have three project files inside the solution:

Client: Contains the client-side code and the pages that will be rendered in the browser.

Server: Contains the server-side code, such as DB-related operations and the Web API.

Shared: Contains the shared code that can be accessed at both the client and server.

Add Blazor File Upload component in the client project

In the client project, add the Syncfusion Blazor File Upload component in the Index.razor page under the Pages folder. For more details, refer to the Getting Started with Blazor File Upload Component documentation.

The following code renders the Blazor File Upload component.

<SfUploader AutoUpload="true" Multiple="false" ID="UploadFiles" MaxFileSize="5000000">
</SfUploader>

Add upload handler to the server project

Step 1: Now, include the connection string details in the appsettings.json file. Refer to the following screenshot.

Include the connection string details in the appsettings.json fileYou can get the connection string in the Access keys section of your storage account. Refer to the following screenshot.

Select the Access keys option to get your keys and connection string.Step 2:  Then, install the Azure.Storage.Blob library to work with the Azure Storage Blob service.

Install the Azure.Storage.Blob libraryStep 3: Add the Save action controller in the UploadAzureController file under the Controllers folder.

Step 4: In the UploadAzureController, extract the Azure connection string from the appsettings.json file and store it in the private variable (azureConnectionString).
Refer to the following code.

[Route("api/[controller]")]
[ApiController]
public class UploadAzureController : ControllerBase
{
    private readonly string azureConnectionString;
    public UploadAzureController(IConfiguration configuration)
    {
        azureConnectionString = configuration.GetConnectionString("AzureConnectionString");
    }
}

Step 5: Now, add the Upload action to upload the files to the Azure Blob storage.

[HttpPost("[action]")]
public async Task Upload(IList<IFormFile> UploadFiles)
{
    try
    {
        foreach (var files in UploadFiles)
        {
            // Azure connection string and container name passed as an argument to get the Blob reference of the container.
            var container = new BlobContainerClient(azureConnectionString, "upload-container");

            // Method to create our container if it doesn’t exist.
            var createResponse = await container.CreateIfNotExistsAsync();

            // If container successfully created, then set public access type to Blob.
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);

            // Method to create a new Blob client.
            var blob = container.GetBlobClient(files.FileName);

            // If a blob with the same name exists, then we delete the Blob and its snapshots.
            await blob.DeleteIfExistsAsync(Azure.Storage.Blobs.Models.DeleteSnapshotsOption.IncludeSnapshots);

            // Create a file stream and use the UploadSync method to upload the Blob.
            using (var fileStream = files.OpenReadStream())
            {
                await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = files.ContentType });
            }
        }
    }
    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;
    }
}

Step 6: Then, add the upload action URL to the Syncfusion Blazor File Upload component.

<SfUploader AutoUpload="true" Multiple="false" ID="UploadFiles" MaxFileSize="5000000">
    <UploaderAsyncSettings SaveUrl="api/UploadAzure/Upload"></UploaderAsyncSettings>
</SfUploader>

Step 7: Finally, execute the project, select the files, and upload them.

Execute the project, select and upload the filesThus, we have uploaded our files in Azure Blob Storage in a Blazor WebAssembly application. Refer to the following screenshot.

Azure Blob Storage account displaying the uploaded file

GitHub reference

For more details, refer to the Upload files to Azure Blob storage using the Blazor File Upload demo.

Conclusion

Thanks for reading! In this blog, we have seen the simple procedures to upload Blazor files in the Azure Blob Storage using the Syncfusion Blazor File Upload component. With this, you can easily store your huge amount of files in the cloud and access them anywhere and anytime. Try out the steps here and leave your feedback in the comments section below!

Syncfusion Essential Studio for Blazor offers over 70 high-performance, lightweight, and responsive UI components for the web, including file-format libraries, in a single package. Use them to build stunning web applications!

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top