Inicio rápido: Administración de blobs con el SDK de JavaScript v12 en un explorador

Azure Blob Storage está optimizado para el almacenamiento de grandes cantidades de datos no estructurados. Los blobs son objetos que pueden contener datos de texto o datos binarios, como imágenes, documentos, elementos multimedia de streaming y datos de archivo. En este inicio rápido, aprenderá a administrar blobs mediante JavaScript en un explorador. Cargará y enumerará los blobs, y creará y eliminará los contenedores.

Recursos adicionales:

• Documentación de referencia de API
• Código fuente de la biblioteca
• Paquete (npm)
• Muestras

Requisitos previos

• Una cuenta de Azure con una suscripción activa
• Una cuenta de Azure Storage.
• Node.js
• Microsoft Visual Studio Code
• Una extensión de Visual Studio Code para la depuración del explorador, como:
  • Debugger for Microsoft Edge
  • Debugger for Chrome
  • Debugger for Firefox

Modelo de objetos

Blob Storage ofrece tres tipos de recursos:

• La cuenta de almacenamiento
• Un contenedor en la cuenta de almacenamiento
• Un blob en el contenedor

En el siguiente diagrama se muestra la relación entre estos recursos.

En este inicio rápido, va a usar las siguientes clases de JavaScript para interactuar con estos recursos:

• BlobServiceClient: La clase BlobServiceClient permite manipular recursos de Azure Storage y contenedores de blobs.
• ContainerClient: La clase ContainerClient permite manipular contenedores de Azure Storage y sus blobs.
• BlockBlobClient: La clase BlockBlobClient permite manipular los blobs de Azure Storage.

Instalación

En esta sección se explica cómo preparar un proyecto para que funcione con la biblioteca cliente de Azure Blob Storage v12 para JavaScript.

Creación de una regla de CORS

Para que la aplicación web pueda acceder a un almacenamiento de blobs desde el cliente, debe configurar la cuenta para habilitar el uso compartido de recursos entre orígenes, o CORS.

En Azure Portal, seleccione la cuenta de almacenamiento. Para definir una nueva regla de CORS, vaya a la sección Configuración y seleccione CORS. En esta guía de inicio rápido, se crea una regla de CORS abierta:

En la tabla siguiente se describe cada opción de configuración de CORS y se explican los valores que se utilizan para definir la regla.

Después de rellenar los campos con los valores de esta tabla, haga clic en el botón Guardar.

Creación de una firma de acceso compartido

La firma de acceso compartido (SAS) la usa el código que se ejecuta en el explorador para autorizar las solicitudes para Azure Blob Storage. Mediante el uso de una firma de acceso compartido, el cliente puede autorizar el acceso a los recursos de almacenamiento sin la clave de acceso de cuenta ni la cadena de conexión. Para más información, consulte Uso de firmas de acceso compartido (SAS).

Siga estos pasos para obtener la dirección URL de SAS de Blob service:

1. En Azure Portal, seleccione la cuenta de almacenamiento.
2. Vaya a la sección Seguridad y redes y seleccione Firma de acceso compartido.
3. Desplácese hacia abajo y haga clic en el botón Generar la cadena de conexión y SAS.
4. Desplácese más hacia abajo y busque el campo URL de SAS de Blob service.
5. Haga clic en el botón Copiar en el portapapeles en el extremo derecho del campo URL de SAS de Blob service.
6. Guarde la dirección URL copiada en algún lugar para usarla en un próximo paso.

Adición de la biblioteca cliente de Azure Blob Storage

En el equipo local, cree una nueva carpeta llamada azure-blobs-js-browser y ábrala en Visual Studio Code.

Seleccione Ver > Terminal para abrir una ventana de consola dentro de Visual Studio Code. Ejecute el siguiente comando del administrador de paquetes de Node.js (npm) en la ventana de terminal para crear un archivo package.json.

npm init -y

El SDK de Azure se compone de muchos paquetes independientes. Puede elegir los paquetes que necesita en función de los servicios que desea usar. Ejecute el siguiente comando npm en la ventana de terminal para instalar el paquete @azure/storage-blob.

npm install --save @azure/storage-blob

Agrupación de la biblioteca cliente de Azure Blob Storage

Para usar las bibliotecas de Azure SDK en un sitio web, convierta el código para que funcione en el explorador. Para ello, use un software que instala varios programas. Esta instalación de varios programas toma el código JavaScript escrito con convenciones Node.js y lo convierte en un formato que los exploradores comprenden. En este artículo de inicio rápido se usa el software Parcel.

Para instalar Parcel, ejecute el comando npm en la ventana de terminal:

npm install -g parcel-bundler

En Visual Studio Code, abra el archivo package.json y agregue browserlist entre las entradas license y dependencies. browserlist tiene como destino la versión más reciente de los tres exploradores populares. El archivo package.json ahora debería tener este aspecto:

{
  "name": "azure-blobs-javascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 1 Edge version",
    "last 1 Chrome version",
    "last 1 Firefox version"
  ],
  "dependencies": {
    "@azure/storage-blob": "^12.1.1"
  }
}

Guarde el archivo package.json.

Importación de la biblioteca cliente de Azure Blob Storage

Para usar las bibliotecas de Azure SDK en JavaScript, importe el paquete @azure/storage-blob. Cree un nuevo archivo en Visual Studio Code que contenga el siguiente código de JavaScript.

// index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient

Guarde el archivo como index.js en el directorio azure-blobs-js-browser.

Implementación de la página HTML

Cree un nuevo archivo en Visual Studio Code y agregue el siguiente código HTML.

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <button id="create-container-button">Create container</button>
    <button id="delete-container-button">Delete container</button>
    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <button id="list-button">List files</button>
    <button id="delete-button">Delete selected files</button>
    <p><b>Status:</b></p>
    <p id="status" style="height:160px; width: 593px; overflow: scroll;" />
    <p><b>Files:</b></p>
    <select id="file-list" multiple style="height:222px; width: 593px; overflow: scroll;" />
</body>

<script src="./index.js"></script>

</html>

Guarde el archivo como index.js en la carpeta azure-blobs-js-browser.

Ejemplos de código

Este código de ejemplo muestra cómo realizar las siguientes tareas con la biblioteca cliente de Azure Blob Storage para JavaScript:

• Declaración de campos para elementos de la interfaz de usuario
• Adición de la información de la cuenta de almacenamiento
• Creación de objetos de cliente
• Creación y eliminación de un contenedor de almacenamiento
• Enumeración de blobs
• Carga de blobs
• Eliminación de blobs

Ejecutará el código después de agregar todos los fragmentos de código al archivo index.js.

Declaración de campos para elementos de la interfaz de usuario

Agregue el siguiente código al final del archivo index.js.

const createContainerButton = document.getElementById("create-container-button");
const deleteContainerButton = document.getElementById("delete-container-button");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const listButton = document.getElementById("list-button");
const deleteButton = document.getElementById("delete-button");
const status = document.getElementById("status");
const fileList = document.getElementById("file-list");

const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}

Guarde el archivo index.js.

Este código declara campos para todos los elementos HTML e implementa una función reportStatus para mostrar la salida.

En las secciones siguientes, agregue cada nuevo bloque de código de JavaScript después del bloque anterior.

Adición de la información de la cuenta de almacenamiento

Agregue código para acceder a la cuenta de almacenamiento. Reemplace el marcador de posición por la dirección URL de SAS de Blob service que ha generado anteriormente. Agregue el siguiente código al final del archivo index.js.

// Update <placeholder> with your Blob service SAS URL string
const blobSasUrl = "<placeholder>";

Guarde el archivo index.js.

Creación de objetos de cliente

Cree BlobServiceClient y ContainerClient para interactuar con el servicio de Azure Blob Storage. Agregue el siguiente código al final del archivo index.js.

// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);

// Create a unique name for the container by 
// appending the current time to the file name
const containerName = "container" + new Date().getTime();

// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(containerName);

Guarde el archivo index.js.

Creación y eliminación de un contenedor de almacenamiento

Cree y elimine el contenedor de almacenamiento cuando haga clic en el botón correspondiente en la página web. Agregue el siguiente código al final del archivo index.js.

const createContainer = async () => {
    try {
        reportStatus(`Creating container "${containerName}"...`);
        await containerClient.create();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

const deleteContainer = async () => {
    try {
        reportStatus(`Deleting container "${containerName}"...`);
        await containerClient.delete();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

createContainerButton.addEventListener("click", createContainer);
deleteContainerButton.addEventListener("click", deleteContainer);

Guarde el archivo index.js.

Enumeración de blobs

Enumere el contenido del contenedor de almacenamiento cuando haga clic en el botón Enumerar archivos. Agregue el siguiente código al final del archivo index.js.

const listFiles = async () => {
    fileList.size = 0;
    fileList.innerHTML = "";
    try {
        reportStatus("Retrieving file list...");
        let iter = containerClient.listBlobsFlat();
        let blobItem = await iter.next();
        while (!blobItem.done) {
            fileList.size += 1;
            fileList.innerHTML += `<option>${blobItem.value.name}</option>`;
            blobItem = await iter.next();
        }
        if (fileList.size > 0) {
            reportStatus("Done.");
        } else {
            reportStatus("The container does not contain any files.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

listButton.addEventListener("click", listFiles);

Guarde el archivo index.js.

Este código llama a la función ContainerClient.listBlobsFlat y, después, usa un iterador para recuperar el nombre de cada BlobItem que devuelve. Para cada BlobItem, actualiza la lista Archivos con el valor de la propiedad name.

Cargar blobs

Cargue los archivos en el contenedor de almacenamiento cuando haga clic en el botón Select and upload files (Seleccionar y cargar archivos). Agregue el siguiente código al final del archivo index.js.

const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
        for (const file of fileInput.files) {
            const blockBlobClient = containerClient.getBlockBlobClient(file.name);
            promises.push(blockBlobClient.uploadBrowserData(file));
        }
        await Promise.all(promises);
        reportStatus("Done.");
        listFiles();
    }
    catch (error) {
            reportStatus(error.message);
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);

Guarde el archivo index.js.

Este código conecta el botón Select and upload files (Seleccionar y cargar archivos) con el elemento file-input oculto. El evento click de botón desencadena el evento click de entrada del archivo y muestra el selector de archivos. Después de seleccionar los archivos y cerrar el cuadro de diálogo, se produce el evento input y se llama a la función uploadFiles. Esta función crea un objeto BlockBlobClient y llama después a la función uploadBrowserData de solo explorador para cada archivo seleccionado. Cada llamada devuelve un objeto Promise. Cada objeto Promise se agrega a una lista para que se puedan esperar juntos, lo que hace que los archivos se carguen en paralelo.

Eliminar blobs

Elimine los archivos del contenedor de almacenamiento cuando haga clic en el botón Delete selected files (Eliminar archivos seleccionados). Agregue el siguiente código al final del archivo index.js.

const deleteFiles = async () => {
    try {
        if (fileList.selectedOptions.length > 0) {
            reportStatus("Deleting files...");
            for (const option of fileList.selectedOptions) {
                await containerClient.deleteBlob(option.text);
            }
            reportStatus("Done.");
            listFiles();
        } else {
            reportStatus("No files selected.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

deleteButton.addEventListener("click", deleteFiles);

Guarde el archivo index.js.

Este código llama a la función ContainerClient.deleteBlob para quitar todos los archivos seleccionado de la lista. Luego, llama a la función listFiles mostrada anteriormente para actualizar el contenido de la lista Archivos.

Ejecución del código

Para ejecutar el código en el depurador de Visual Studio Code, configure el archivo launch.json para el explorador.

Configuración del depurador

Para configurar la extensión del depurador en Visual Studio Code:

1. Seleccione Ejecutar > Agregar configuración.
2. Seleccione Edge, Chrome o Firefox, en función de la extensión que haya instalado en la sección Requisitos previos anterior.

Agregar una nueva configuración crea un archivo launch.json y lo abre en el editor. Modifique el archivo launch.json para que el valor url sea http://localhost:1234/index.html, tal como se muestra:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:1234/index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Después de actualizarlo, guarde el archivo launch.json. Esta configuración indica a Visual Studio Code qué explorador abrir y qué dirección URL cargar.

Inicio del servidor web

Para iniciar el servidor web de desarrollo local, seleccione Ver > Terminal para abrir una ventana de consola en Visual Studio Code y, luego, escriba el siguiente comando.

parcel index.html

Parcel agrupa el código e inicia un servidor de desarrollo local para la página en http://localhost:1234/index.html. Los cambios que realice en index.js se compilarán automáticamente y se reflejarán en el servidor de desarrollo cada vez que guarde el archivo.

Si recibe un mensaje que indica que no se pudo usar el puerto 1234 configurado, puede cambiar el puerto mediante la ejecución del comando parcel -p <port#> index.html. En el archivo launch.json, actualice el puerto en la ruta de dirección URL para que coincida.

Iniciar la depuración

Ejecute la página en el depurador y hágase una idea de cómo funciona el almacenamiento de blobs. Si se produce algún error, el panel de estado de la página web mostrará el mensaje de error recibido.

Para abrir index.html en el explorador con el depurador de Visual Studio Code asociado, seleccione Depurar > Iniciar depuración o presione F5 en Visual Studio Code.

Uso de la aplicación web

En Azure Portal, puede comprobar los resultados de las llamadas API a medida que sigue los pasos que se indican a continuación.

Paso 1: Creación de un contenedor

1. En la aplicación web, seleccione Crear contenedor. El estado indica que se ha creado un contenedor.
2. Para comprobarlo en Azure Portal, seleccione la cuenta de almacenamiento. En Blob service, seleccione Contenedores. Compruebe que aparece el nuevo contenedor. (Puede que tenga que seleccionar Actualizar).

Paso 2: Carga de un blob en el contenedor

1. En el equipo local, cree y guarde un archivo de prueba, como test.txt.
2. En la aplicación web, haga clic en Select and upload files (Seleccionar y cargar archivos).
3. Busque el archivo de prueba y seleccione Abrir. El estado indica que el archivo se ha cargado y se ha recuperado la lista de archivos.
4. En Azure Portal, seleccione el nombre del nuevo contenedor que creó anteriormente. Compruebe que aparece el archivo de prueba.

Paso 3: Eliminación del blob

1. En la aplicación web, en Archivos, seleccione el archivo de prueba.
2. Seleccione Delete selected files (Eliminar archivos seleccionados). El estado indica que el archivo se ha eliminado y que el contenedor no contiene archivos.
3. En Azure Portal, seleccione Actualizar. Compruebe que ve No se encontró ningún blob.

Paso 4: Eliminación del contenedor

1. En la aplicación web, seleccione Delete container (Eliminar contenedor). Este estado indica que el contenedor se ha eliminado.
2. En Azure Portal, seleccione el vínculo <account-name> | Contenedores en la parte superior izquierda del panel del portal.
3. Seleccione Refresh (Actualizar). Desaparecerá el nuevo contenedor.
4. Cierre la aplicación web.

Limpieza de recursos

Haga clic en la consola de Terminal en Visual Studio Code y presione CTRL + C para detener el servidor web.

Para limpiar los recursos creados durante este inicio rápido, vaya a Azure Portal y elimine el grupo de recursos que creó en la sección Requisitos previos.

Pasos siguientes

En este inicio rápido, ha aprendido a cargar, enumerar y eliminar blobs mediante JavaScript. También ha aprendido a crear y eliminar un contenedor de almacenamiento de blobs.

Para ver tutoriales, ejemplos, artículos de inicio rápido y otra documentación, visite:

• Para más información, consulte Uso de la biblioteca cliente de Azure Blob Storage para JavaScript.
• Para ver las aplicaciones de ejemplo de Blob Storage, continúe con los ejemplos de la biblioteca cliente de Azure Blob Storage para JavaScript v12.