BlobStorage + ASP (MVC)

Hoy vamos a continuar explorando Microsoft Azure y en esta ocasión trabajaremos con el servicio «Blob Storage» desde una página web desarrollada en ASP (MVC).

Requisitos

1. Suscripción a Microsoft Azure
2. Visual Studio 2010 0 superior

Primero analizaremos la estructura del Blob Storage.  Creamos una cuenta de almacenamiento , dentro de ella tendremos contenedores (para un solo tipo de archivo o varios) y en el interior de éstos nuestros blobs que contarán con  una uri con el siguiente formato

https://nombreCuentaAlmacenamiento.blob.core.windows.net/nombreContenedor/nombreBlob

por ejemplo

 

Bueno llego el momento de iniciar, para ello crearemos un proyecto ASP (MVC)

Una vez creado vamos a instalar el paquete Nuget para administrar nuestros blobs, daamos click en Herramientas, Administrador de paquetes Nuget y Administrar paquetes Nuget para la solución

En la nueva ventana seleccionamos la pestaña de «Examinar», ingresamos como criterio de búsqueda «Blob storage», lo seleccionamos e instalamos

Ahora vamos a Microsoft Azure y creamos un servicio de «Cuentas de almacenamiento», acá vamos a ingresar algunos datos que son relativos a las reglas de negocio por ejemplo:

1. Modelo de implementación: Seleccionamos Administrador de recursos
2. Tipo de cuenta: Almacemiento de blobs
3. Rendimiento: Estándar
4. Replicación: Local
5. Nivel de acceso: Estándar

Una vez creado se nos deplegará la siguiente sección

Damos click en «Agregar Contenedor», ingresamos el nombre y el tipo de acceso (también es relativo a las reglas del negocio, en nuestro casos será contenedor)

Regresamos a Visual Studio, buscamos el archivo Web.config y agregamos la siguiente línea entre <appSettings>…</appSettings>

<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=nombreCuenta;AccountKey=claveCuenta" />

Para obtener el nombre de la cuenta y la clave debemos regresar a Microsoft Azure, tomaremos la primer llave (Si desean obtener más información del por qué dos llaves pueden visitar este artículo)

También tenemos que crear un modelo como el siguiente

Persona.cs

    public class Persona
    {
        public HttpPostedFileBase MyFile { get; set; }
    }

Vamos a modificar la vista Index del controlador Home de manera que quede así

Index.cshtml

@model Ejemplo_BlobStorage.Models.Persona
<div class="jumbotron">
<h1>ASP.NET</h1>
ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.

<a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></div>
<div class="row">
<div class="col-md-12">
        @using (Html.BeginForm("CargarImagen", "Home", FormMethod.Post, new { id = "myForm", enctype = "multipart/form-data" }))
        {

            @Html.TextBoxFor(m => m.MyFile, new { type = "file" , accept = ".png, .jpg, .jpeg"})

            <input type="submit" value="Cargar Imagen" />

       }
<h2>@ViewBag.Mensaje</h2>
</div>
</div>

Vamos analizar el codigo anterior

1. Esta vista está haciendo uso del modelo Persona.
2. Creamos un formulario que envía datos mediante POST al método «CargarImagen» del controlador «Home». Vamos a enviar un archivo por lo que debemos agregarle al formulario el enctype.
3. Creamos un TextBox con las propiedades HTML type=»file» y accept para que solo acepte el tipo de archivos que especificamos.

En nuestro controlador vamos agregar el método «CargarImagen»

HomeController.cs

[HttpPost]
       public ActionResult CargarImagen(Persona persona)
       {
            string mensaje = String.Empty;

            // verificamos si se ha seleccionado un archivo
            if (persona.MyFile != null)
            {
                try
                {
                    var extension = persona.MyFile.FileName.Split('.')[1];

                    // Obtenemos referencia a la configuración de la cuenta en el webconfig.
                    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
                        CloudConfigurationManager.GetSetting("StorageConnectionString"));

                    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

                    // Obtenemos referencia al contenedor
                    CloudBlobContainer container = blobClient.GetContainerReference("img");

                    // Creamos el contenedor si no existe
                    container.CreateIfNotExists();

                    // Obtenems referencia al blob
                    CloudBlockBlob blockBlob = container.GetBlockBlobReference(Guid.NewGuid().ToString() + "." + extension);

                    // Creamos o sobreescribimos el blob
                    using (var fileStream = persona.MyFile.InputStream)
                    {
                        // cargamos el blob
                        blockBlob.UploadFromStream(fileStream);

                        // una vez que se ha cargado podemos obtener la uri accediente a la función Uri, por ejemplo blockBlob.Uri

                    }

                    mensaje = "Imagen cargada con éxito " + blockBlob.Uri;

                }
                catch(Exception e)
                {
                    mensaje = "Error al cargar la imagen " + e.ToString();
                }

            }
            else
            {
                mensaje = "Seleccione una imagen!";
            }

            ViewBag.Mensaje = mensaje;

            return View("Index");
       }

Nota: Si CloudConfigurationManager les aparece en rojo deben instalar el paquete Nuget «ConfigurationManager»

Al ejecutar la aplicación obtendremos una vista similar a la siguiente

Si cargamos una imagen aparece el siguiente resultado

Vamos a dirigirnos a Microsoft Azure para comprobar que se estén cargando los blobs, en nuestra cuenta de almacenamiento seleccionamos el contenedor y se desplegarán los blobs dentro de él

Al seleccionar un Blob nos aparece la información de éste , podemos copiar la URL y pegarla en nuestro navegador

 

En GitHub pueden encontrar la copia del proyecto , hasta la próxima 🙂