En el presente artículo presentaré una estrategia para almacenar y visualizar archivos en un Azure Blob Storage, el cual enlazare con un artículo previo realizado donde subí archivos a un sitio web bajo MVC ubicado aquí. Voy a realizar los ajustes necesarios al proyecto anterior para poder realizar el almacenamiento y visualización de archivos en el blob storage.

 

                A continuación realizaré el paso a paso para lograr el objetivo de este artículo.

 

1.       En primer lugar desde el navegador de internet vamos a la dirección: https://portal.azure.com e iniciamos sesión con nuestra cuenta de Azure. Una vez ahí seleccionamos la opción "Storage accounts"

 

2.       Ahora pasamos a la pantalla donde creamos las Cuentas de almacenamiento o "Storage accounts", y seleccionamos agregar o "Add"

 ImgArchBlogPreliminar2.jpg

 

3.       En esta pantalla se ingresa la información necesaria para crear el "storage account"

 ImgArchBlogPreliminar3.jpg
 

4.       Luego de ingresar los datos solicitados podemos ver que esta creado un "storage account" según como fue configurado, y ahora se procede a seleccionar este nuevo elemento "sigemastore".

 ImgArchBlogPreliminar4.jpg
 

5.       Al seleccionar el nuevo "storage account" creado, aparece la siguiente pantalla en donde nos dirigimos a la opción "Access keys".

 ImgArchBlogPreliminar5.jpg 
 

6.       Al acceder a esta opción podemos ver unas llaves de acceso que se crean para poder acceder al "blob storage" desde la aplicación. Tomaremos una de ellas para usarla en la aplicación.

 
ImgArchBlogPreliminar6.jpg 

 7.       Ya creado el "store account" debemos crear el "Blob" para almacenar los archivos,  para esto nos dirigimos a la opción "Overview" del storage account creado y seleccionamos "Blobs".


 ImgArchBlogPreliminar7.jpg

8.       Ahora aparece la siguiente pantalla donde creamos el contenedor con el cual vamos a trabajar.

 ImgArchBlogPreliminar8.jpg
 

9.       Procedemos a la asignación de un nombre al contenedor y el tipo de acceso al mismo, para nuestro caso de ejemplo seleccioné "Blob".

 ImgArchBlogPreliminar8-9.jpg


10.   Una vez creado el contenedor debemos visualizar algo similar a la imagen a continuación y estaríamos listo para trabajar desde la aplicación en Visual Studio.

 ImgArchBlogPreliminar8-10.jpg


11.    Ahora recuperamos el proyecto de Visual Studio del artículo anterior el cual se encuentra construido  bajo MVC con un controlador y varios métodos que se utilizaron para la carga de los archivos.

 ImgArchBlog1.jpg

12.   En primer lugar agregamos las referencias necesarias al proyecto para poder utilizar los objetos para poder trabajar con el "blob storage", nos dirigimos a la opción de menú "Proyecto" y después a "Agregar referencia".


 ImgArchBlog2.jpg
 

13.   En la ventana donde buscamos la referencia, ingresamos la siguiente en el cuadro de búsqueda y seleccionamos la referencia indicada.

ImgArchBlog3.jpg

 14.   Al agregar este elemento la vemos listada en la sección de referencias del proyecto

ImgArchBlog4.jpg 
 

15.   Ahora nos dirigimos al controlador y agregamos estas líneas de código para poder utilizar estos objetos en nuestro proyecto.

 ImgArchBlog5.jpg
 

16.   Luego agregamos las siguientes entradas en el archivo Web.config que permitirán lograr la conexión al blob storage. Estos valores son los que revisamos anteriormente en la creación del storage account.

 ImgArchBlog6.jpg 

17.   Creamos el siguiente método privado dentro del controlador "Home" del proyecto. Ahí podemos ver en el recuadro rojo que recuperamos del archivo "Web.config" los valores para poder conectarnos al "blob storage". En el recuadro amarillo están las instrucciones para realizar la conexión al contenedor y subir el archivo al mismo. En el recuadro azul se obtiene la ruta donde se guardó el archivo para mostrarla en la pantalla de salida de la aplicación.

ImgArchBlog7.jpg

18.   Incorporamos este cambio de código al ActionResult tipo HttpPost  del proyecto que estamos reutilizando. El recuadro rojo esta la instrucción para el llamado del método definido en el paso anterior, y el recuadro amarillo direccionamos la salida del método al View "Salida".

 ImgArchBlog8.jpg 

19.   Con estos cambios realizados procedemos a ejecutar el proyecto y procedemos a cargar un archivo de imagen en la vista "Cargar archivo".

 ImgArchBlog9.jpg

 20.   Al seleccionar "enviar", el archivo es subido al sitio web y de ahí es almacenado en el "blob storage - conteiner" como lo veremos a continuación. En la imagen esta la ruta donde se guardó el archivo cargado.

ImgArchBlog10.jpg

 21.   Si copiamos y pegamos esa dirección en un navegador de internet podemos acceder a la imagen recién guardada.

ImgArchBlog11.jpg

22.   Para seguir validando, podemos ir al sitio del  Portal de Azure, específicamente al "conteiner" creado para este artículo y veremos nuevamente el archivo.

 ImgArchBlog12.jpg

 23.   Si seleccionamos el archivo cargado, podemos ver más detalles del mismo.

ImgArchBlog13.jpg
  

Con estas instrucciones paso a paso pudimos observar todo el procedimiento necesario para poder subir un archivo a un sitio web, y de ahí alojar dicho archivo en un "Azure blog storage". Espero que este artículo les sea de utilidad, si quieren aprender más sobre desarrollo de aplicaciones, desarrollo en SharePoint o de SharePoint en general por favor visita nuestro site de Eigo Academy para conocer nuestra oferta de cursos.