Carga de archivos a Azure Blob Storage en Blazor
El servicio de almacenamiento Azure Blob es uno de los servicios más utilizados en el ecosistema de Azure y le permite cargar una gran cantidad de archivos a la nube a un precio muy económico. También dispone de una web intuitiva a la que puedes acceder a ellos o descargarla mediante un enlace directo.
En general es un servicio bastante bueno, lo he estado usando tanto para proyectos laborales como personales y, sinceramente, lo mejor es la simplicidad de cómo hacerlo funcionar.
La mayoría de los casos en los que he usado Azure Blob Storage es en el backend, cargando directamente algo que es el resultado de una operación o algo así. Así que realmente no he subido ningún archivo desde un sitio web. ¡Desafortunado!
Como soy fanático de Blazor, les traigo una forma de cargar archivos en Azure Blob Storage utilizando la entrada de archivos nativos de HTML5.
Requisitos previos
- Cuenta de Azure (si no la tiene, vaya aquí con un montón de $$$).
- Un IDE (VS, Código, cualquiera funcionará)
- .NET Core 3.0 o superior
Creación de un almacenamiento de blobs de Azure
Vaya a su portal de Azure y procedamos a crear una cuenta de almacenamiento.
Primero busque Storage accounts y haga clic en el resultado.
Una vez cargado, haga clic en Create.
Aparecerá un formulario con varios pasos, así que continúa y complétalos.
Después de completar todo con la configuración que desee, pase la validación y cree el recurso.
Una vez creado, haga clic en Go to resource. Obtendremos una cadena de conexión que nos permitirá jugar con la API.
Obtener las claves de recursos
Después de llegar a nuestro recurso recién creado, vaya a Acccess keys debajo de Security + networking. Después de cargar verás un Connection string y un Key, ¡cópialos porque los vamos a necesitar más tarde!
Creando un proyecto genial de Blazor Server
Usaré Visual Studio 2022 para este tutorial, pero como dije antes, puedes usar cualquier otro IDE y simplemente crear el proyecto usando la CLI dotnet.
Luego, sigamos adelante y creemos un proyecto Blazor muy rápido usando Visual Studio en solo unos pocos pasos.
Si ejecutamos lo que acabamos de crear, se verá así, simplemente una aplicación Blazor normal y corriente.
Ahora que hemos creado el proyecto, hagamos algunas cosas de la interfaz de usuario para tener una nueva página con un montón de entradas para que podamos completar las claves del recurso, un InputFile para los archivos, un botón para hacer algo y un mensaje que resultará de la acción.
Creando el modelo
Necesitaremos algunos modelos para hacer esto correctamente. Primero tendremos la clase BlobRequest que manejará la cadena de conexión, el nombre del contenedor y los archivos.
Además, para mantener todo ordenado, crearemos una clase llamada BlobFile en la que almacenaremos el Name y el Data.
He creado una carpeta llamada Models para que tengamos todo separado.
Las clases son muy sencillas.```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; }
}
}
Modificando la interfaz de usuario
Ahora que hemos creado nuestro modelo, ¡sigamos adelante y hagamos algo de magia en la interfaz de usuario con él!
En primer lugar, cree una página en la carpeta Pages llamada Upload.razor.
En esta página vamos a agregar un pequeño formulario que completará nuestra clase BlobRequest, por lo que tenemos que agregar entradas para ConnectionString, Container y 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!");
}
}
Es un poco de código, pero básicamente representará el formulario y manejará la validación.
Si presionas el botón para cargar y todo está bien, mostrará una alerta.
Carga en Azure Blob Storage
Ahora que hemos terminado la mayor parte de la interfaz de usuario, instalemos el paquete que manejará la API de Azure Blob Storage y nos permitirá cargar archivos. Bastante sencillo.
Agregar el paquete NuGet
Administremos los paquetes NuGet del proyecto y agreguemos Azure.Storage.Blob.
Cargar en Azure Blob Stoare
Ahora hagamos la lógica para cargar el archivo, normalmente usaríamos la cadena de conexión y la clave de app.config pero, por el bien de este tutorial, usamos entradas y proporcionamos los datos allí.
Primero, agreguemos el using para la clase Azure Blob Storage.
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
Luego vamos a trabajar en el método HandleValidSubmit, que se conectará al almacenamiento de blobs, creará el contenedor si no existe y luego cargará los archivos.
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!");
}
}
Probando el código
Ahora es el momento de probar el código, para hacerlo, simplemente complete el formulario y haga clic en enviar.
Mostraremos una alerta y el archivo debería cargarse en Azure Blob Storage, vaya al Portal de Azure y eche un vistazo.
Como puede ver, el contenedor también fue creado, ahora si entramos al contenedor, vemos el archivo que subimos.
¡Buen trabajo!
Refactorizar
Ahora que todo está trabajado, muevamos el código de la página .razor a una clase .razor.cs para que se vea mejor.
Si está utilizando Visual Studio 2022, hay una bombilla cuando pasa el cursor justo en @code, le mostrará una opción para Extract block to code behind y hará lo que dice.
¡Ahora vas a tener todo separado y listo!
Código
¡Este proyecto completo está en Github y puedes encontrarlo aquí!
Si tienes algún problema o pregunta, no dudes en contactarme en cualquier red social en @emimontesdeoca (en Twitter en realidad es @emimontesdeocaa con dos aa al final). También puedes encontrar la mayoría de mis redes sociales en el encabezado del blog.
Espero que os haya gustado el post! ¡Cya!