pricing - ¿Cargar archivo en Azure Blob Storage directamente desde el navegador?

microsoft management azure

Question

¿Es posible crear un formulario html para permitir que los usuarios de la web carguen archivos directamente en Azure Blob Store sin usar otro servidor como intermediario? S3 y GAW blobstore permiten esto, pero no puedo encontrar ningún soporte para el almacenamiento de blob de color azul.

Answer 1

Ahora que los servicios de almacenamiento de Windows Azure son compatibles con CORS, puede hacer esto. Puede ver el anuncio aquí: Versión de almacenamiento de Windows Azure: Introducción a CORS, JSON, Minute Metrics y más .

Tengo un ejemplo simple que ilustra este escenario aquí: http://www.contentmaster.com/azure/windows-azure-storage-cors/

El ejemplo muestra cómo cargar y descargar directamente desde un blob privado usando jQuery.ajax. Este ejemplo aún requiere un componente de servidor para generar la firma de acceso compartido: esto evita la necesidad de exponer la clave de la cuenta de almacenamiento en el código del cliente.

Answer 2

Eche un vistazo a estas publicaciones del blog para cargar archivos directamente desde el navegador al almacenamiento de blobs:

http://coderead.wordpress.com/2012/11/21/uploading-files-directly-to-blob-storage-from-the-browser/

http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript

La segunda publicación (escrita por mí) hace uso de HTML 5 File API y, por lo tanto, no funciona en todos los navegadores.

La idea básica es crear una Shared Access Signature (SAS) para un contenedor de blobs. El SAS debe tener permiso de Write . Dado que Windows Azure Blob Storage no es compatible con CORS todavía (que es compatible con Amazon S3 y Google), deberá alojar la página HTML en el almacenamiento de blob en el que desea que los usuarios carguen el archivo. Entonces puedes usar la funcionalidad Ajax de jQuery.

Answer 3

Hay una nueva biblioteca de cliente de Azure Storage JavaScript para exploradores (Vista previa) .

( Todo lo de este post viene del artículo original arriba )

• La biblioteca de cliente de JavaScript para Azure Storage permite muchos escenarios de desarrollo web utilizando servicios de almacenamiento como Blob, Table, Queue y File, y es compatible con los navegadores modernos
• La nueva biblioteca de cliente de JavaScript para navegadores es compatible con todas las funciones de almacenamiento disponibles en la última versión de la API de REST 2016-05-31, ya que se ha creado con Browserify utilizando la biblioteca de clientes de almacenamiento de Azure para Node.js

Recomendamos encarecidamente el uso de tokens SAS para autenticarse con Azure Storage ya que la Biblioteca de cliente de JavaScript expondrá el token de autenticación al usuario en el navegador. Se recomienda un token SAS con alcance y tiempo limitados. En una aplicación web ideal, se espera que la aplicación back-end autentique a los usuarios cuando inicien sesión y luego proporcione un token SAS al cliente para autorizar el acceso a la cuenta de almacenamiento. Esto elimina la necesidad de autenticarse usando una clave de cuenta. Echa un vistazo a la muestra de la función de Azure en nuestro repositorio Github que genera un token SAS en una solicitud HTTP POST.

Ejemplo de código:

1. Inserte las siguientes etiquetas de script en su código HTML. Asegúrese de que los archivos JavaScript se encuentran en la misma carpeta.

   <script src="azure-storage.common.js"></script/>
   <script src="azure-storage.blob.js"></script/>

2. Ahora agreguemos algunos elementos a la página para iniciar la transferencia. Agregue las siguientes etiquetas dentro de la etiqueta BODY. Observe que el botón llama al método uploadBlobFromText cuando se hace clic. Definiremos este método en el siguiente paso.

   <input type="text" id="text" name="text" value="Hello World!" />
   <button id="upload-button" onclick="uploadBlobFromText()">Upload</button>

3. Hasta ahora, hemos incluido la biblioteca del cliente y agregado el código HTML para mostrar al usuario una entrada de texto y un botón para iniciar la transferencia. Cuando el usuario haga clic en el botón de carga, se llamará a uploadBlobFromText. Vamos a definir eso ahora:

   <script>
   function uploadBlobFromText() {
       // your account and SAS information
       var sasKey ="....";
       var blobUri = "http://<accountname>.blob.core.windows.net";
       var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter());
       var text = document.getElementById(''text'');
       var btn = document.getElementById("upload-button");
       blobService.createBlockBlobFromText(''mycontainer'', ''myblob'', text.value,  function(error, result, response){
           if (error) {
               alert(''Upload filed, open browser console for more detailed info.'');
               console.log(error);
           } else {
               alert(''Upload successfully!'');
           }
       });
   }
   </script>

Answer 4

He escrito una blog con un ejemplo sobre cómo hacer esto, el código está en GitHub

Se basa en la publicación de Gaurav Mantris y funciona al alojar el JavaScript en el propio Blob Storage.

Answer 5

Puede usar HTML5 File API, AJAX y MVC 3 para crear un control robusto de carga de archivos para cargar archivos enormes de manera segura y confiable al almacenamiento de blob de Windows Azure con una provisión de monitoreo del progreso de la operación y la cancelación de la operación. La solución funciona de la siguiente manera:

1. JavaScript del lado del cliente que acepta y procesa un archivo cargado por el usuario.
2. Código del lado del servidor que procesa los fragmentos de archivos enviados por JavaScript.
3. IU del lado del cliente que invoca a JavaScript.

Obtenga el código de muestra aquí: Cargas confiables a Windows Azure Blob Storage a través de un control HTML5