Hochladen von Dateien in Azure Blob Storage in Blazor
Der Azure Blob-Speicherdienst ist einer der am häufigsten genutzten Dienste im Azure-Ökosystem. Er ermöglicht das Hochladen vieler Dateien in die Cloud und ist dabei supergünstig. Es verfügt außerdem über ein intuitives Web, auf das Sie zugreifen oder es über einen direkten Link herunterladen können.
Alles in allem ein recht guter Service, ich nutze ihn sowohl für berufliche als auch für private Projekte und ehrlich gesagt ist das Beste die Einfachheit, mit der er funktioniert.
In den meisten Fällen habe ich Azure Blob Storage im Backend verwendet und dort direkt etwas hochgeladen, das das Ergebnis eines Vorgangs oder ähnliches ist. Ich habe also noch nie eine Datei von einer Website oder so hochgeladen. Unglücklich!
Da ich ein Blazor-Fan bin, zeige ich Ihnen eine Möglichkeit, Dateien mithilfe der nativen Dateieingabe von HTML5 in einen Azure Blob Storage hochzuladen.
Voraussetzungen
- Azure-Konto (wenn Sie es nicht haben, gehen Sie hier mit einer Menge $$$ zu).
- Eine IDE (VS, Code, alles wird funktionieren)
- .NET Core 3.0 oder höher
Erstellen eines Azure Blob Storage
Gehen Sie zu Ihrem Azure-Portal und beginnen Sie mit der Erstellung eines Speicherkontos.
Suchen Sie zunächst nach Storage accounts und klicken Sie auf das Ergebnis.
Klicken Sie nach dem Laden auf Create.
Es erscheint ein Formular mit einer Reihe von Schritten. Füllen Sie diese aus.
Nachdem Sie alles mit den gewünschten Einstellungen gefüllt haben, bestehen Sie die Validierung und erstellen Sie die Ressource.
Nachdem es erstellt wurde, klicken Sie auf Go to resource. Wir erhalten eine Verbindungszeichenfolge, mit der wir mit der API spielen können.
Holen Sie sich die Ressourcenschlüssel
Nachdem wir zu unserer neu erstellten Ressource gelangt sind, gehen Sie zu Acccess keys unter Security + networking. Nach dem Laden sehen Sie ein Connection string und ein Key, kopieren Sie sie, da wir sie später brauchen werden!
Erstellen eines coolen Blazor Server-Projekts
Ich werde für dieses Tutorial Visual Studio 2022 verwenden, aber wie ich bereits sagte, können Sie jede andere IDE verwenden und das Projekt einfach mit der dotnet-CLI erstellen.
Dann lassen Sie uns mit Visual Studio in nur wenigen Schritten ganz schnell ein Blazor-Projekt erstellen.
Wenn wir das ausführen, was wir gerade erstellt haben, sieht es so aus: eine ganz normale Blazor-Anwendung.
Nachdem wir das Projekt nun erstellt haben, erledigen wir einige Dinge an der Benutzeroberfläche, damit wir eine neue Seite mit einer Reihe von Eingaben haben, die wir mit Schlüsseln aus der Ressource, einem InputFile für die Datei(en), einer Schaltfläche zum Ausführen einer Aktion und einer Meldung, die sich aus der Aktion ergibt, füllen können.
Erstellen des Modells
Wir werden einige Modelle brauchen, um das richtig zu machen. Zuerst haben wir die Klasse BlobRequest, die die Verbindungszeichenfolge, den Containernamen und die Dateien verarbeitet.
Um alles übersichtlich zu halten, erstellen wir außerdem eine Klasse namens BlobFile, in der wir den Name und den Data speichern.
Ich habe einen Ordner namens Models erstellt, damit wir alles getrennt haben.
Die Kurse sind sehr einfach.```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; }
}
}
Ändern der Benutzeroberfläche
Nachdem wir nun unser Modell erstellt haben, können wir damit beginnen, die Benutzeroberfläche zu zaubern!
Erstellen Sie zunächst eine Seite im Ordner Pages mit dem Namen Upload.razor.
Auf dieser Seite werden wir ein kleines Formular hinzufügen, das unsere Klasse BlobRequest ausfüllt, also müssen wir Eingaben für ConnectionString, Container und Files hinzufügen.
@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!");
}
}
Es ist ein bisschen Code, aber im Grunde wird das Formular gerendert und die Validierung durchgeführt.
Wenn Sie auf die Schaltfläche zum Hochladen klicken und alles in Ordnung ist, wird eine Warnung angezeigt.
Hochladen in Azure Blob Storage
Nachdem wir nun den Großteil der Benutzeroberfläche fertiggestellt haben, installieren wir nun das Paket, das die Azure Blob Storage-API verwaltet und uns das Hochladen von Dateien ermöglicht. Ziemlich einfach.
Fügen Sie das NuGet-Paket hinzu
Lassen Sie uns die NuGet-Pakete aus dem Projekt verwalten und Azure.Storage.Blob hinzufügen.
Auf Azure Blob Stoare hochladen
Lassen Sie uns nun die Logik für das eigentliche Hochladen der Datei erstellen. Normalerweise würden wir die Verbindungszeichenfolge und den Schlüssel aus der app.config verwenden, aber für dieses Tutorial verwenden wir Eingaben und stellen die Daten dort bereit.
Fügen wir zunächst den using für die Azure Blob Storage-Klasse hinzu
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
Dann werden wir an der Methode HandleValidSubmit arbeiten, die eine Verbindung zum Blob-Speicher herstellt, den Container erstellt, falls dieser nicht vorhanden ist, und dann die Dateien hochlädt.
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!");
}
}
Testen des Codes
Jetzt ist es an der Zeit, den Code zu testen. Füllen Sie dazu einfach das Formular aus und klicken Sie auf „Senden“.
Wir zeigen eine Warnung an und die Datei sollte in den Azure Blob Storage hochgeladen werden. Gehen Sie zum Azure-Portal und werfen Sie einen Blick darauf.
Wie Sie sehen, wurde auch der Container erstellt. Wenn wir nun in den Container gelangen, sehen wir die von uns hochgeladene Datei.
Gute Arbeit!
Refactor
Nachdem nun alles funktioniert hat, verschieben wir den Code von der Seite .razor in eine Klasse .razor.cs, damit er besser aussieht.
Wenn Sie Visual Studio 2022 verwenden, erscheint beim Bewegen des Mauszeigers direkt im @code eine Glühbirne. Es zeigt Ihnen eine Option für Extract block to code behind und tut, was es verspricht!
Jetzt wird alles getrennt und erledigt!
Code
Das gesamte Projekt ist auf Github und Sie können es hier finden!
Wenn Sie Probleme oder Fragen haben, können Sie mich gerne über die sozialen Medien unter @emimontesdeoca kontaktieren (auf Twitter ist das eigentlich @emimontesdeocaa mit zwei aa am Ende). Die meisten meiner sozialen Netzwerke finden Sie auch in der Kopfzeile des Blogs.
Ich hoffe, Ihnen hat der Beitrag gefallen! Cya!