AZURE STORAGE FILE - Tech Riders

En este tutorial aprenderemos a:

Crear una cuenta para manejar ficheros dentro de Storage File de Azure.
Realizar una aplicación MVC que leerá ficheros de una cuenta Storage de Azure File. Tendremos la posibilidad de subir o mostrar los ficheros de un recurso compartido.
También podremos mostrar los datos de un fichero TXT o de un determinado fichero XML.

Lo único necesario antes de comenzar es una cuenta de Azure con dinero, ya que si no no podremos hacer nada, y un grupo de recursos.

Para empezar, dentro de nuestra cuenta de Azure buscamos cuentas de almacenamiento y escogemos la primera (logo verde).

Ahora crearemos una nueva cuenta. El nombre debe ser único, yo lo llamaré storagefile + mis iniciales; es decir storagefilerrm en mi caso. También usaremos un grupo de recursos ya creado; el mio se llama RecursosTajamar.

Una vez creada, pulsamos sobre Archivos

Podemos subir archivos directamente desde Azure creando un recurso compartido de archivos, le daremos un nombre (ficheros) y una cuota (5120).

Después de esto, podremos cargar archivos desde Azure:

Ahora para subir archivos desde nuestra aplicación crearemos un nuevo proyecto MVC, al que llamaremos MVCAzureFileStorage, pulsando sobre Archivo/Nuevo/Proyecto. Se abrirá una ventana en la que en el menú de la izquierda elegiremos Web y en la ventana central Aplicación web ASP.NET(.NET Framework).

Aceptamos y se abrirá otra ventana en la que elegiremos MVC:

Deberemos agregar dos paquetes NuGet a nuestro proyecto, para ello pulsamos con el botón derecho sobre el proyecto y elegimos Administrar paquetes NuGet…. Después sobre Examinar buscaremos en la barra de búsqueda WindowsAzure.Storage y Microsoft.WindowsAzure.ConfigurationManager y los instalaremos.

Necesitaremos las claves de acceso a nuestra cuenta de almacenamiento storagefilerrm. Para ello en nuestra cuenta de Azure vamos a la cuenta de almacenamiento que hemos creado y pulsamos sobre Claves de Acceso

Copiaremos la cadena de conexión de la Key1

Abrimos nuestro archivo Web.config y escribimos lo siguiente:

*Recordad que donde pongo cadenaconexion debéis pegar la cadena de conexión que habéis copiado antes de vuestra cuenta Azure y en nombre el que queráis*

Vamos a darle funcionalidad a la página. Empezaremos creando sobre Models una nueva clase llamada ModeloFileAzure, que se encargará de subir archivos, mostrar los ficheros de un recurso compartido o devolver las películas de un documento XML. Botón derecho sobre Models/Agregar/Clase…

Agregaremos tres espacios de nombre a nuestra clase:

using Microsoft.Azure;

using Microsoft.WindowsAzure.Storage;

using Microsoft.WindowsAzure.Storage.File;

El primero sirve para darle funcionalidad a las keys, el segundo para la funcionalidad de la cuenta storage y el tercero para la funcionalidad del File.

Declaramos a nivel de clase el directorio y el fichero y en el constructor instanciamos los objetos Azure Storage:

namespace MVCAzureFileStorage.Models{

public class ModeloFileAzure{

CloudFileDirectory directorio;

CloudFile fichero;

public ModeloFileAzure(){

//PARA OBTENER ACCESO A LA CUENTA STORAGE DEBEMOS USAR SUS CLAVES

//PARA ELLO RECUPERAMOS LA CADENA DE CONEXION

//QUE HEMOS INCLUIDO EN EL Web.config (USAMOS EL VALOR DE KEY)

String claves = CloudConfigurationManager.GetSetting(«storagefile»);

//CON LAS CLAVES ACCEDEMOS A LA CUENTA STORAGE

CloudStorageAccount cuenta = CloudStorageAccount.Parse(claves);

//PARA ACCEDER A NUESTRO RECURSO DEBEMOS CREAR UN CLIENTE

//DEL TIPO DE RECURSO QUE QUERAMOS (EN ESTE CASO FILE)

CloudFileClient cliente = cuenta.CreateCloudFileClient();

//CON NUESTRO CLIENTE DE TIPO FILE RECUPERAMOS EL RECURSO COMPARTIDO

//QUE HEMOS CREADO ANTES LLAMADO FICHEROS

CloudFileShare recurso = cliente.GetShareReference(«ficheros»);

//PARA GUARDAR ARCHIVOS EN LA RAÍZ DE NUESTRO RECURSO

//ACCEDEMOS AL DIRECTORIO

this.directorio = recurso.GetRootDirectoryReference();

} }

}

Creamos nuestro método para subir ficheros a Azure llamado SubirFicheroAzure:

public void SubirFicheroAzure(String nombre, Stream contenido){

//ACCEDEMOS A LA REFERENCIA DEL ARCHIVO POR SU NOMBRE

fichero = this.directorio.GetFileReference(nombre);

//ESCRIBIMOS EL CONTENIDO

fichero.UploadFromStream(contenido);

}

Para poder recibir el contenido como Stream debemos agregar un nuevo espacio de nombre:

using System.IO;

Ahora vamos a crear nuestro controlador AzureFileController. Para ello sobre la carpeta Controllers pulsamos con el botón derecho y elegimos Agregar/Controlador…. En la ventana que se abre elegimos Controlador de MVC5: en blanco, aceptamos y escribimos el nombre:

Deberemos agregar dos espacios de nombre:

using System.IO;

using MVCAzureFileStorage.Models;

Declaramos a nivel de clase nuestro modelo y lo instanciamos en el constructor:

public class AzureFileController : Controller{

ModeloFileAzure modelo;

public AzureFileController(){

this.modelo = new ModeloFileAzure();

}

Creamos los ActionResult para nuestra vista, se llamará SubirFichero:

public ActionResult SubirFichero(){

return View();

}

[HttpPost]

public ActionResult SubirFichero(HttpPostedFileBase archivo){

Stream stream = archivo.InputStream;

modelo.SubirFicheroAzure(archivo.FileName, stream);

ViewBag.Correcto = «Fichero subido correctamente»;

return View();

}

Ahora creamos nuestra vista SubirFichero. Se encontrará dentro de la carpeta Views/AzureFile y contará con un formulario para recibir el archivo:

ViewBag.Title = «SubirFichero»;

}

<h2>Subir Fichero Azure Storage File</h2>

<div>

<label>Seleccione un archivo:</label>

</div>

<br />

<div>

<button type=»submit» class=»btn-success»>Subir fichero Azure</button>

</div>

</form>

@ViewBag.Correcto

</h4>

@Html.ActionLink(«Volver al listado», «ArchivosAzure», «AzureFile»)

Crearemos un fichero prueba.txt y un fichero series.json para comprobar que los ficheros se suben:

Iniciamos la aplicación y subimos los archivos creados:

*Recordad que debéis estar dentro de vuestra cuenta de Azure para que se suban los archivos*

Comprobemos que se han subido correctamente en nuestra cuenta de Azure:

Si pulsamos sobre el nuevo archivo, podremos ver las características, además de poder ver su URL para su acceso.

Ahora vamos a mostrar un listado de los archivos que hemos subido a nuestro File Storage.

Creamos en nuestro modelo un método GetArchivosAzure para buscar los archivos y devolverlos:

public List<String> GetArchivosAzure(){

List<String> archivos = new List<String>();

//RECUPERAMOS LOS ARCHIVOS DEL DIRECTORIO

IEnumerable<IListFileItem> datos = this.directorio.ListFilesAndDirectories();

//RECORREMOS LOS DATOS

foreach(IListFileItem item in datos){

//COGEMOS LA RUTA URI DE CADA RECURSO

String rutauri = item.Uri.ToString();

//GUARDAMOS EL NOMBRE DEL ARCHIVO QUE OBTENEMOS DE LA RUTA

int pos = rutauri.LastIndexOf(«/») + 1;

String nombrearchivo = rutauri.Substring(pos);

//AÑADIMOS EL NOMBRE A LA COLECCION

archivos.Add(nombrearchivo);

}

return archivos;

}

Y creamos un ActionResult en nuestro controlador para mandar los datos a la vista que crearemos posteriormente:

public ActionResult ArchivosAzure(){

List<String> archivos = modelo.GetArchivosAzure();

return View(archivos);

}

Para terminar creamos nuestra vista ArchivosAzure para mostrar la lista de archivos:

@model List<String>

ViewBag.Title = «ArchivosAzure»;

}

<h2>Listado de Archivos de Azure</h2>

@if(Model == null){

<h4 style=»color:red»>Lo sentimos aún no existen archivos en este directorio</h4>

} else{

<ul>

@foreach(String archivo in Model){

<li>@archivo</li>

}

</ul>

}

@Html.ActionLink(«Subir archivo», «SubirFichero», «AzureFile»)

Comprobemos si se visualiza todo correctamente:

Convertiremos estos archivos en enlaces para mostrar el contenido de estos:

@model List<String>

ViewBag.Title = «ArchivosAzure»;

}

<h2>Listado de Archivos de Azure</h2>

@if(Model == null){

<h4 style=»color:red»>Lo sentimos aún no existen archivos en este directorio</h4>

} else{

<ul>

@foreach(String archivo in Model){

if (archivo.EndsWith(«txt»)){

<li>@Html.ActionLink(archivo, «DatosTXT», «AzureFile», new { nombrearchivo = archivo }, null)</li>

} else if (archivo.EndsWith(«xml»)){

<li>@Html.ActionLink(archivo, «DatosXML», «AzureFile», new { nombrearchivo = archivo }, null)</li>

} else{

<li>@archivo</li>

}

</ul>

}

@Html.ActionLink(«Subir archivo», «SubirFichero», «AzureFile»)

En función de si el archivo es un txt o un xml mandaremos al usuario a distintas páginas pero siempre mandaremos el nombre del archivo.

Si el archivo es un TXT haremos lo siguiente:

El nuestro modelo crearemos un nuevo método para leer archivos de texto, LeerTXT:

public String LeerTXT(String nombrearchivo){

//BUSCAMOS EL NOMBRE DE NUESTRO ARCHIVO EN NUESTRO DIRECTORIO

CloudFile archivo = this.directorio.GetFileReference(nombrearchivo);

//DESCARGAMOS EL CONTENIDO DEL ARCHIVO COMO TEXTO

String contenido = archivo.DownloadTextAsync().Result;

return contenido;

}

A continuación en nuestro controlador creamos el ActionResult necesario para nuestra vista y le mandaremos el contenido por ViewBag:

public ActionResult DatosTXT(String nombrearchivo){

String contenido = this.modelo.LeerTXT(nombrearchivo);

ViewBag.Contenido = contenido;

return View();

}

Y por último creamos nuestra vista:

@{
ViewBag.Title = «DatosTXT»;
}

<h2>Datos archivo TXT</h2>

@if(ViewBag.Contenido != null){
<p>@ViewBag.Contenido</p>
} else{
<h4 style=»color:red»>Lo sentimos ha ocurrido un error</h4>
}

@Html.ActionLink(«Volver al listado», «ArchivosAzure», «AzureFile»)

Comprobamos el resultado:

Si el archivo es un XML haremos lo siguiente:

Primero crearemos un archivo XML llamado LibrosCapitulos de la siguiente manera y lo subimos a Azure:

<?xml version=»1.0″ encoding=»iso-8859-1″ ?>

<nombre>Libro 1</nombre>

<autor>Autor 1</autor>

<nombre>Capitulo 1 – Libro 1</nombre>

<imagen>https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKmLlhpR25SWjf3qroroUsoHl9NAnHzn7K1cwfoZuK81_hHaaM</imagen>

</capitulo>

<nombre>Capitulo 3 – Libro 1</nombre>

<imagen>https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Zx2ZRmmrsxaIFZDHcpeL5XilSZfK4zx48aSZNSPYCGd-Ixcq_g</imagen>

</capitulo>

<nombre>Capitulo 5 – Libro 1</nombre>

<imagen>https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQF2osrkAvGabgi-jVTa5NFDrtSHl_URGKJb1T2_n4gl2rk40tRyA</imagen>

</capitulo>

</libro>

<nombre>Libro 2</nombre>

<autor>Autor 2</autor>

<nombre>Capitulo 2 – Libro 2</nombre>

<imagen>https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgPzLjnmoCaLad8uC6KKT6qTrWXrUQEVMdimkg8b9uTQhr2OWrww2</imagen>

</capitulo>

<nombre>Capitulo 4 – Libro 2</nombre>

<imagen>https://vignette.wikia.nocookie.net/es.harrypotter/images/5/59/Harry_Potter_y_la_piedra_filosofal_-_Ilustraci%C3%B3n_cap%C3%ADtulo_14.png/revision/latest?cb=20151001161100</imagen>

</capitulo>

<nombre>Capitulo 6 – Libro 2</nombre>

</capitulo>

</libro>

<nombre>Libro 3</nombre>

<autor>Autor 3</autor>

<nombre>Capitulo 1 – Libro 3</nombre>

</capitulo>

<nombre>Capitulo 4 – Libro 3</nombre>

</capitulo>

</libro>

</libros>

Entonces debemos crear dos clases dentro de la carpeta Models, de la misma manera que creamos la clase ModeloFileAzure.cs; las llamaremos Capitulo y Libro:

Deberemos crear en nuestro ModeloFileAzure un método para leer documentos XML, necesitaremos el espacio de nombres:

using System.Xml.Linq;

public List<Libro> LeerXML(String nombrearchivo){

//CREAMOS UN CONTENIDO EN LA MEMORIA PARA LEER EL DOCUMENTO

MemoryStream contenido = new MemoryStream();

//ACCEDEMOS AL FICHERO POR SU NOMBRE

CloudFile archivo = this.directorio.GetFileReference(nombrearchivo);

//DESCARGAMOS SU CONTENIDO EN UN STRING

String datos = archivo.DownloadText(System.Text.Encoding.UTF8);

//CREAMOS UN NUEVO DOCUMENTO XML A PARTIR DEL STREAM DE AZURE

XDocument doc = XDocument.Parse(datos);

//HACEMOS LA CONSULTA PARA OBTENER LA LISTA

var consulta = from d in doc.Descendants(«libro»)

select new Libro{

Nombre = (String)d.Element(«nombre»),

Autor = (String)d.Element(«autor»),

NumeroPaginas = (int)d.Element(«numeropaginas»),

Imagen = (String)d.Element(«img»),

Capitulos = new List<Capitulo>(

from cap in d.Descendants(«capitulo»)

select new Capitulo{

NombreCapitulo = cap.Element(«nombre»).Value,

ImagenCapitulo = cap.Element(«imagen»).Value

})

};

return consulta.ToList();

}

A continuación creamos el ActionResult para la vista DatosXML:

public ActionResult DatosXML(String nombrearchivo){

List<Libro> libros = modelo.LeerXML(nombrearchivo);

return View(libros);

}

Para terminar creamos la vista DatosXML dentro de nuestra carpeta AzureFile:

@model IEnumerable<MVCAzureFileStorage.Models.Libro>

ViewBag.Title = «DatosXML»;

}

<h2>Datos archivo XML</h2>

<tr>

<th>NOMBRE</th>

<th>AUTOR</th>

<th>Nº PÁGINAS</th>

<th>PORTADA</th>

<th>CAPITULOS</th>

</tr>

@foreach (var item in Model) {

<tr>

<td>

@item.Nombre

</td>

<td>

@item.Autor

</td>

<td>

@item.NumeroPaginas

</td>

<td>

</td>

<td>

<ul>

@foreach(var cap in item.Capitulos){

<li>@cap.NombreCapitulo</li>

<li>

</li>

}

</ul>

</td>

</tr>

}

</table>

@Html.ActionLink(«Volver al listado», «ArchivosAzure», «AzureFile»)

Comprobemos que todo funciona bien:

Para más información puedes visitar este enlace.

Autora: Raquel Rodríguez Marcos

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2017-2018

Código / recursos utilizados: https://github.com/Infinity31/MVCAzureFileStorage.git

This Post Has 2 Comments

jorge alexander valencia valencia 18 mayo, 2019 Reply

excelente post (audio, pdfs o imagenes necesitaba este post) si algo le puedo escribir
- Raquel Rodriguez 4 septiembre, 2019 Reply
  
  Muchísimas gracias, me alegro mucho de que mi post te haya sido de ayuda 😀
  En la parte superior del post tienes un enlace a un tutorial en Youtube en el que hago lo mismo pero de forma (espero) que más corta y amena. Espero que te guste 🙂

This Post Has 2 Comments

Leave a Comment Cancelar la respuesta

Leave a Comment
Cancelar la respuesta