Almacenar imágenes mediante Azure Blob Storage
¿Qué es Azure Blob Storage?
Blob Storage es un servicio para almacenar grandes cantidades de datos de objetos no estructurados, como texto o datos binarios(principalmente imagenes y videos). Puede usar Blob Storage para exponer datos públicamente al mundo, o para almacenar datos de aplicaciones de forma privada.
Dicho esto, en el presente post vamos a aprender a almacenar y eliminar imágenes en Azure Blob Storage y poder consumirlas en una aplicación ASP.NET mvc . En la aplicación visualizaremos todas las imágenes de nuestro contenedor en una tabla, y tendremos un enlace para poder eliminar cada una de las imágenes individualmente.
Lo primero que debemos realizar es crearnos una cuenta de almacenamiento en Azure.
En la captura muestro como configurar la cuenta de almacenamiento, donde prueba12 es el nombre de la cuenta de almacenamiento.
Si todos los datos siguientes han sido validados con éxito, deberiamos ver:
Si nos aparece esto, debemos pulsar en el boton de crear y esperar a que termine.
Si tiene alguna duda pulsa en la explicacion oficial de microsoft: https://docs.microsoft.com/es-es/azure/storage/common/storage-quickstart-create-account?tabs=azure-portal
Después, necesitamos crearnos dentro de nuestra cuenta de almacenamiento un contenedor, en el cual guardaremos las imágenes. Para ello, debemos entrar en nuestra cuenta de almacenamiento y pulsar sobre blobs.
Una vez ahi debemos pulsar en +Contenedor y crear nuestro contenedor.
Nos saldra un cuadro de texto donde pondremos el nombre del contenedor.
Importante: si queremos que se vean las imágenes en nuestra pagina(que es el caso), debemos poner el nivel de acceso público.
Por último debemos acceder a nuestra clave, así podremos tener acceso a todos los contenedores que tengamos creados en nuestra cuenta de almacenamiento.Para ello vamos a nuestra cuenta de almacenamiento y pulsamos sobre claves de acceso.
Una vez finalizado esto, debemos abrir Visual Studio y crear un nuevo proyecto ASP.NET MVC Framework.
Marcamos la opcion MVC y pulsamos en OK.
Lo primero de todo es descargar los paquetes Microsoft.WindowsAzure.ConfigurationManager y WindowsAzure.Storage.
Después nos dirigiremos a establecer la conexion con nuestra cuesta de azure de almacenamiento. Para ello debemos ir al Web.config y en el apartado de appSettings añadir nuestra cadena de conexion con nuestra clave. La key puede tener el nombre que deseemos.
Luego sobre Models, deberemos crearnos la clase imagen, con las propiedades nombre y url.
public class Imagen{public String Nombre { get; set; }public String UrlImg { get; set; }}
Esta la clase la usaremos para guardar los datos de las imágenes en una lista de la clase.(List<Imagen>).
Modificamos la vista Index que viene por defecto:
En este código, como hemos explicado antes, tendrá un formulario con un campo para seleccionar un fichero y un botón para subir el fichero seleccionado.
También la vista recibe una lista de imágenes, en caso de contener imágenes nuestro contenedor, creará una tabla con todas las imágenes. En caso de que sea null no pintará la tabla.
Después debemos ir a nuestro HomeController y para crear la funcionalidad de subir imagenes a Azure.
Antes de escribir nada añadimos los using:
using Microsoft.Azure;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
Y este es el código del HomeController:
public class HomeController : Controller
{
List imglist = new List();
public ActionResult Index(String nombre)
{
String keys = CloudConfigurationManager.GetSetting("ConexionBlobs");
//nombre de la key de appsettings
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(keys);
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
CloudBlobContainer container = blobClient.GetContainerReference("imagenes");
//nombre de nuestro contenedor que hemos creado dentro de nuestra cuenta
if (nombre != null)
{
CloudBlockBlob blockBlob = container.GetBlockBlobReference(nombre);
blockBlob.Delete();
}
foreach (IListBlobItem item in container.ListBlobs(null, true))
{
if (item.GetType() == typeof(CloudBlockBlob))
{
CloudBlockBlob blob = (CloudBlockBlob)item;
Imagen img = new Imagen();
img.Nombre = blob.Name;
img.UrlImg = blob.Uri.AbsoluteUri;
imglist.Add(img);
}
}
return View(imglist);
}
[HttpPost]public ActionResult Index(){var file = Request.Files[0];if (file != null && file.ContentLength > 0){String keys = CloudConfigurationManager.GetSetting("ConexionBlobs");CloudStorageAccount storageAccount = CloudStorageAccount.Parse(keys); CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient(); CloudBlobContainer container = blobClient.GetContainerReference("imagenes");CloudBlockBlob blockBlob = container.GetBlockBlobReference(file.FileName); blockBlob.UploadFromStream(file.InputStream);}return RedirectToAction("Index");}}
}
En el codigo, lo que hacemos nada mas cargar la pagina, es crear la cuenta de almacenamiento a traves de las claves que hemos configurado en el Web.config, y crear también la referencia nuestro contenedor.
Teniendo el contenedor, ya tenemos acceso a todos las imágenes que estén es él. Por lo que recorremos todo el contenedor y envío a la vista una lista de imágenes.
En caso de que el nombre sea distinto de null eliminaremos la imagen que corresponda con dicho nombre.
Y por último en el método HttpPost, capturo el fichero que haya seleccionado para guardarlo en Azure. Me creo la conexión otra vez y lo subo mediante el método UploadFromStream.
Y ya podemos probar la aplicación:
Esto seria todo lo necesario para poder eliminar y almacenar las imágenes en Azure. A continuación os dejo el enlace del código la aplicación por si tienen alguna duda.
Autor: Marcos Molano Soriano
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019