Upload Files to a Cloud Storage

• Aug 25, 2023
• 3 minutes to read

The DevExpress Blazor Upload component allows you to upload files to a web server or cloud storage. Follow the steps below to configure your Blazor application to upload files to Microsoft Azure:

1. Create a storage account on Azure. Refer to Microsoft documentation for instructions: Create a storage account.

2. Specify the Azure connection string in the appsettings.json file as follows:

   {
       "Logging": {
           "LogLevel": {
               "Default": "Information",
               "Microsoft.AspNetCore": "Warning"
           }
       },
       "ConnectionStrings": {
           "AzureConnectionString": "your-azure-connection-string"
       },
       ...
   }
   

3. Open Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage Packages for Solution…). In the invoked widow, install the Azure.Storage.Blobs package.

   

4. Create an Upload Controller as described in the following section: Create an Upload Controller on the Server.

5. In the controller class, obtain the Azure connection string and assign it to a variable as follows:

   using Microsoft.AspNetCore.Mvc;
   
   namespace Cloud.Controllers {
       [Route("api/[controller]")]
       [ApiController]
       public class UploadController : ControllerBase {
           private readonly string azureConnectionString;
           public UploadController(IConfiguration configuration) {
               azureConnectionString = configuration.GetConnectionString("AzureConnectionString");
           }
       }
   }
   

6. Implement a controller action that uploads a file to the Azure Blob storage:

   using Azure.Storage.Blobs.Models;
   using Azure.Storage.Blobs;
   using Microsoft.AspNetCore.Http.Features;
   using Microsoft.AspNetCore.Mvc;
   
   namespace BlazorDemo.AspNetCoreHost;
   [Route("api/[controller]")]
   [ApiController]
   public class UploadController : ControllerBase {
       [HttpPost("[action]")]
       public async Task Upload(IFormFile myCloudStorage) {
           try {
               // Get the Blob reference of upload-container
               var container = new BlobContainerClient(azureConnectionString, "upload-container");
               // Create upload-container if it does not exist
               var createResponse = await container.CreateIfNotExistsAsync();
               if(createResponse != null && createResponse.GetRawResponse().Status == 201)
                   await container.SetAccessPolicyAsync(PublicAccessType.Blob);
               // Create a new Blob client
               // Don't rely on or trust the FileName property without validation.
               var blob = container.GetBlobClient(myCloudStorage.FileName);
               await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);
               // Upload the Blob
               using(var fileStream = myCloudStorage.OpenReadStream()) {
                   await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = myCloudStorage.ContentType });
               }
           } catch(Exception e) {
               // Handle upload exceptions here
           }
       }
   }
   

   Important

   To introduce secure file upload operations to your web app, we recommend that you add different validation types to upload controller code. Refer to the following sources for more information:

   • Upload Files in ASP.NET Core - Security Considerations
   • Upload Files in ASP.NET Core - Validation
   • Unrestricted File Upload
   • Microsoft Azure - Accept Files from Users

7. Add a DxUpload component to your Blazor application’s markup. Specify UploadUrl and Name properties. The Name property value must match the Upload action’s parameter name.

   <DxUpload Name="myCloudStorage" UploadUrl=@GetUploadUrl("api/Upload/Upload/") />
   
   @code {
       protected string GetUploadUrl(string url) {
           return NavigationManager.ToAbsoluteUri(url).AbsoluteUri;
       }
   }
   

8. Run the application. You can now upload a file:

   

   After that, the upload-container and uploaded file is shown in your Azue Blob storage: