Téléchargement de fichiers sur Azure Blob Storage dans Blazor
Le service de stockage Azure Blob est l’un des services les plus utilisés de l’écosystème Azure, il vous permet de télécharger de nombreux fichiers sur le cloud tout en étant très bon marché. Il dispose également d’un site Web intuitif auquel vous pouvez accéder ou le télécharger par un lien direct.
Dans l’ensemble, c’est un bon service, je l’utilise à la fois pour des projets professionnels et personnels et honnêtement, la meilleure chose est la simplicité de son fonctionnement.
La plupart des cas dans lesquels j’ai utilisé Azure Blob Storage se trouvent dans le backend, téléchargeant directement quelque chose qui est le résultat d’une opération ou quelque chose du genre. Je n’ai donc pas vraiment téléchargé de fichier à partir d’un site Web. Malchanceux!
Puisque je suis un fanboy de Blazor, je vous propose un moyen de télécharger des fichiers sur un stockage Azure Blob en utilisant l’entrée de fichier native de HTML5.
Prérequis
- Compte Azure (si vous ne l’avez pas, allez [ici] (aka.ms/free) avec un tas de $$$).
- Un IDE (VS, Code, tout fonctionnera)
- .NET Core 3.0 ou supérieur
Création d’un stockage Azure Blob
Accédez à votre portail Azure et procédons à la création d’un compte de stockage.
Recherchez d’abord Storage accounts et cliquez sur le résultat.
Une fois chargé, cliquez sur Create.
Un formulaire apparaîtra avec un certain nombre d’étapes, alors n’hésitez pas à les remplir.
Après avoir tout rempli avec les paramètres souhaités, passez la validation et créez la ressource.
Après sa création, cliquez sur Go to resource. Nous allons obtenir une chaîne de connexion qui nous permettra de jouer avec l’API.
Récupérez les clés de ressources
Une fois arrivés à notre ressource nouvellement créée, accédez à Acccess keys sous le Security + networking. Après le chargement, vous verrez un Connection string et un Key, copiez-les car nous en aurons besoin plus tard !
Création d’un projet Blazor Server sympa
Je vais utiliser Visual Studio 2022 pour ce didacticiel, mais comme je l’ai déjà dit, vous pouvez utiliser n’importe quel autre IDE et simplement créer le projet à l’aide de la CLI dotnet.
Alors allons-y et créons un projet Blazor très rapidement à l’aide de Visual Studio en quelques étapes seulement.
Si nous exécutons ce que nous venons de créer, cela ressemblera à ceci, juste une application Blazor normale.
Maintenant que le projet est créé, faisons quelques trucs sur l’interface utilisateur afin d’avoir une nouvelle page avec un tas d’entrées afin que nous puissions remplir les clés de la ressource, un InputFile pour le(s) fichier(s), un bouton pour faire quelque chose et un message qui résultera de l’action.
Création du modèle
Nous aurons besoin de modèles pour le faire correctement. Nous aurons d’abord la classe BlobRequest qui gérera la chaîne de connexion, le nom du conteneur et les fichiers.
De plus, pour que tout soit bien rangé, nous allons créer une classe appelée BlobFile dans laquelle nous stockerons le Name et le Data.
J’ai créé un dossier appelé Models pour que tout soit séparé.
Les cours sont très simples.```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; }
}
}
Modification de l’interface utilisateur
Maintenant que notre modèle est créé, allons-y et faisons de la magie sur l’interface utilisateur avec !
Tout d’abord, créez une page sous le dossier Pages appelée Upload.razor.
Dans cette page, nous allons ajouter un petit formulaire qui remplira notre classe BlobRequest, nous devons donc ajouter des entrées pour ConnectionString, Container et 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!");
}
}
C’est un peu de code mais, en gros, il restituera le formulaire et gérera la validation.
Si vous appuyez sur le bouton pour télécharger et que tout va bien, une alerte s’affichera.
Téléchargement vers Azure Blob Storage
Maintenant que la majeure partie de l’interface utilisateur est terminée, installons maintenant le package qui gérera l’API Azure Blob Storage et nous permettra de télécharger des fichiers. Assez simple.
Ajouter le package NuGet
Gérons les packages NuGet du projet et ajoutons Azure.Storage.Blob.
Télécharger sur Azure Blob Stoare
Passons maintenant à la logique pour télécharger réellement le fichier, normalement nous utiliserions la chaîne de connexion et la clé de app.config mais pour les besoins de ce didacticiel, nous utilisons des entrées et nous y fournissons les données.
Tout d’abord, ajoutons le using pour la classe Azure Blob Storage
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
Ensuite nous allons travailler sur la méthode HandleValidSubmit, qui va se connecter au stockage blob, créer le conteneur s’il n’existe pas puis télécharger les fichiers.
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!");
}
}
Tester le code
Il est maintenant temps de tester le code, pour ce faire, il suffit de remplir le formulaire et de cliquer sur soumettre.
Nous afficherons une alerte et le fichier devra être téléchargé sur Azure Blob Storage, accédez au portail Azure et jetez-y un œil.
Comme vous pouvez le voir, le conteneur a également été créé, maintenant si nous entrons à l’intérieur du conteneur, nous voyons le fichier que nous avons téléchargé.
Bon travail !
Refactoriser
Maintenant que tout fonctionne, déplaçons le code de la page .razor vers une classe .razor.cs pour qu’il soit meilleur.
Si vous utilisez Visual Studio 2022, il y a une ampoule lorsque vous survolez directement dans @code, elle vous montrera une option pour Extract block to code behind, et elle fera ce qu’elle dit !
Maintenant, vous allez tout séparer et tout faire !
#Code
L’intégralité de ce projet est sur Github et vous pouvez le trouver ici !
Si vous avez des problèmes ou des questions, n’hésitez pas à me contacter sur n’importe quel réseau social à @emimontesdeoca (sur Twitter, c’est en fait @emimontesdeocaa avec deux aa à la fin). Vous pouvez également retrouver la plupart de mes réseaux sociaux sur l’en-tête du blog.
J’espère que vous avez aimé le message ! Ouais !