Blazor での Azure Blob Storage へのファイルのアップロード
Azure Blob Storage サービスは、Azure エコシステムで最も使用されているサービスの 1 つであり、非常に安価でありながら大量のファイルをクラウドにアップロードできます。また、直観的な Web を備えており、直接リンクでアクセスしたりダウンロードしたりできます。
全体的に非常に優れたサービスで、私は仕事と個人のプロジェクトの両方でこれを使用してきましたが、正直に言って、最も優れている点は、それを機能させる方法がシンプルであることです。
私が Azure Blob Storage を使用したほとんどのケースはバックエンドで、操作などの結果として得られたものを直接アップロードしています。したがって、Web サイトなどからファイルをアップロードするようなことは実際には行っていません。不運！
私は Blazor のファンなので、HTML5 からのネイティブ ファイル入力を使用して Azure Blob Storage にファイルをアップロードする方法を紹介します。
前提条件
- Azure アカウント (お持ちでない場合は、ここ に $$$ を集めてアクセスしてください)。
- IDE (VS、Code、どれでも動作します)
- .NET Core 3.0以降
Azure Blob Storage の作成
Azure portal に移動し、ストレージ アカウントの作成に進みましょう。
まず Storage accounts を検索し、結果をクリックします。
ロードしたら、Create をクリックします。
多数の手順が記載されたフォームが表示されるので、先に進んで入力してください。
必要な設定をすべて入力したら、検証に合格してリソースを作成します。
作成したら、Go to resource をクリックします。 API を操作できるようにする接続文字列を取得します。
リソースキーを取得する
新しく作成したリソースに到達したら、Security + networking の下の Security + networking に移動します。ロードすると、Connection string と Key が表示されます。後で必要になるため、これらをコピーします。
クールな Blazor サーバー プロジェクトの作成
このチュートリアルでは Visual Studio 2022 を使用しますが、前に述べたように、他の IDE を使用することもでき、dotnet CLI を使用してプロジェクトを作成するだけです。
それでは、Visual Studio を使用して、わずかな手順で Blazor プロジェクトをすばやく作成してみましょう。
作成したものを実行すると、次のようになります。これは、ごく普通の Blazor アプリケーションです。
プロジェクトを作成したので、いくつかの UI 作業を行いましょう。リソースからのキー、ファイルの InputFile、何かを実行するボタン、およびアクションの結果として生じるメッセージを入力できるように、大量の入力を含む新しいページができます。
モデルの作成
これを適切に行うにはいくつかのモデルが必要です。まず、接続文字列、コンテナ名、ファイルを処理する BlobRequest クラスを用意します。
また、すべてをきれいに保つために、Name と Data を保存する BlobFile というクラスを作成します。
Models という名前のフォルダーを作成したので、すべてが分離されました。
授業はとてもシンプルです。```csharp using System.ComponentModel.DataAnnotations;
namespace UploadingFilesAzBlobBlazor.Models {
public class BlobRequest
{
[Required(ErrorMessage = “Connection string is required”)]
public string? ConnectionString { get; set; }
[Required(ErrorMessage = “Container name is required”)]
public string? Container { get; set; }
public List
```csharp
namespace UploadingFilesAzBlobBlazor.Models
{
public class BlobFile
{
public string? Name { get; set; }
public byte[]? Data { get; set; }
}
}
UI の変更
モデルを作成したので、それを使って UI に魔法をかけてみましょう。
まず、Pages フォルダーの下に Upload.razor という名前のページを作成します。
このページでは、BlobRequest クラスを満たす小さなフォームを追加するので、ConnectionString、Container、および Files の入力を追加する必要があります。
@page "/upload"
@using UploadingFilesAzBlobBlazor.Models
@inject IJSRuntime JsRuntime
<PageTitle> Upload</PageTitle>
<h1> Azure blob storage uploader!</h1>
<EditForm Model="@modal" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="mb-3">
<label for="connectionString" class="form-label"> Connection string</label>
<InputText class="form-control" id="connectionString" @bind-Value="modal.ConnectionString" />
</div>
<div class="mb-3">
<label for="container" class="form-label"> Container name</label>
<InputText class="form-control" id="container" @bind-Value="modal.Container" />
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label"> Files</label>
<InputFile OnChange="OnInputFileChange" class="form-control" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
</EditForm>
@code {
private BlobRequest modal = new();
private EditContext editContext;
IReadOnlyList <IBrowserFile> selectedFiles;
private void OnInputFileChange(InputFileChangeEventArgs e)
{
selectedFiles = e.GetMultipleFiles();
this .StateHasChanged();
}
private async Task HandleValidSubmit() {
// This is where we are going to upload stuff !
await JsRuntime.InvokeVoidAsync("alert", "Files uploaded!");
}
}
これは少しのコードですが、基本的にはフォームをレンダリングし、検証を処理します。
アップロードするボタンを押して問題がなければ、警告が表示されます。
Azure Blob Storage へのアップロード
ほとんどの UI が完成したので、Azure Blob Storage API を処理し、ファイルをアップロードできるようにするパッケージをインストールしましょう。とてもシンプルです。
NuGet パッケージを追加する
プロジェクトから NuGet パッケージを管理し、Azure.Storage.Blob を追加しましょう。
Azure BLOB ストアにアップロードする
ここで、実際にファイルをアップロードするためのロジックを実行しましょう。通常、接続文字列と app.config のキーを使用しますが、このチュートリアルのために、入力を使用し、そこにデータを提供します。
まず、Azure Blob Storage クラスの using を追加しましょう
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
次に、HandleValidSubmit メソッドに取り組みます。これは、BLOB ストレージに接続し、コンテナーが存在しない場合は作成して、ファイルをアップロードします。
private async Task HandleValidSubmit()
{
try
{
// Instantiate container
var container = new BlobContainerClient(modal.ConnectionString, modal.Container);
// Create container if not exists
var createResponse = await container.CreateIfNotExistsAsync();
// Set access policy
if (createResponse != null && createResponse.GetRawResponse().Status == 201)
{
await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
}
// For each file that we have uploaded
foreach (var file in selectedFiles)
{
// New blob
var blob = container.GetBlobClient(file.Name);
// Delete any blob with the same name
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 = file.OpenReadStream())
{
await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = file.ContentType });
}
}
// Display success message
await JsRuntime.InvokeVoidAsync("alert", "Files uploaded!");
}
catch (Exception e)
{
// Display error message
await JsRuntime.InvokeVoidAsync("alert", "An error ocurred!");
}
}
コードのテスト
ここでコードをテストします。テストするには、フォームに記入して送信をクリックするだけです。
アラートが表示され、ファイルが Azure Blob Storage にアップロードされるはずです。Azure ポータルにアクセスして確認してください。
ご覧のとおり、コンテナーも作成されました。コンテナー内に入ると、アップロードしたファイルが表示されます。
頑張ってね！
リファクタリング
すべてがうまくいったので、コードを .razor ページから .razor.cs クラスに移動して、見栄えを良くしましょう。
Visual Studio 2022 を使用している場合、@code にマウスを移動すると電球が表示され、Extract block to code behind のオプションが表示され、そのとおりに動作します。
これで、すべてが分離されて完了します。
コード
このプロジェクト全体は Github にあり、ここ で見つけることができます。
問題や質問がある場合は、ソーシャル メディアで @emimontesdeoca までお気軽にご連絡ください (Twitter では実際には @emimontesdeocaa で最後に aa が 2 つ付いています)。私のソーシャルのほとんどはブログのヘッダーからも見つけることができます。
投稿が気に入っていただければ幸いです!キャー！