【Blazor】Azure Blob Storageに画像をアップロードする手順

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "AzureConnectionString": "コピーした接続文字列"
  },
  "AllowedHosts": "*"
}

using System.Net.Mime;
using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Microsoft.AspNetCore.Mvc;

namespace BlazorFileUploadTest.Server.Controllers;

[Route("api/[controller]")]
public class UploadAzureController : ControllerBase
{
    private readonly string azureConnectionString;

    public UploadAzureController(IConfiguration configuration)
    {
        azureConnectionString = configuration.GetConnectionString("AzureConnectionString");
    }

    [HttpPost("[action]")]
    [Produces(MediaTypeNames.Application.Json)]
    public async Task<ActionResult<IEnumerable<string>>> Upload([FromForm(Name = "images")] IFormFileCollection files)
    {
        List<string> uploadUrls = new();

        foreach (var file in files)
        {
            var container = new BlobContainerClient(azureConnectionString, "upload-container");

            // コンテナが作成されていなければ作成
            var createResponse = await container.CreateIfNotExistsAsync();

            // BLOB へのアクセス許可
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(PublicAccessType.Blob);

            // フォルダ階層の指定
            var blob = container.GetBlobClient($"images/{Guid.NewGuid()}/{DateTime.Now:yyyyMMddHHmmssfff}");

            // すでにファイルがあれば削除
            await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);

            // BLOB にアップロード
            using (var fileStream = file.OpenReadStream())
            {
                await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = file.ContentType });
            }
            uploadUrls.Add(blob.Uri.ToString());
        }

        // アップロードしたファイルの URL を返却
        return Ok(uploadUrls);
    }

}

@page "/file-upload"

@inject HttpClient HttpClient
@using System.Net.Http.Headers

<InputFile OnChange="@HandleSelected" multiple />
@if (ImgUrls is not null)
{
    @foreach (var url in ImgUrls)
    {
        <div>
            <img src="@url" class="image-preview" style="width: 300px" />
        </div>
    }
}

@code{
    public IEnumerable<string>? ImgUrls { get; set; }

    private async Task HandleSelected(InputFileChangeEventArgs e)
    {
        long maxFileSize = 1024 * 1024 * 15;
        using (var content = new MultipartFormDataContent())
        {
            content.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data");
            foreach (var imageFile in e.GetMultipleFiles())
            {
                var fileContent = new StreamContent(imageFile.OpenReadStream(maxFileSize));
                content.Add(fileContent, "images", imageFile.Name);
            }
            var response = await HttpClient.PostAsync("api/UploadAzure/Upload", content);
            ImgUrls = await response.Content.ReadFromJsonAsync<IEnumerable<string>?>();
        }
    }
}