Загрузить файл в хранилище BLOB-объектов Azure прямо из браузера?

Взгляните на эти сообщения в блоге для загрузки файлов прямо из браузера в хранилище BLOB-объектов:

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

Основная идея - создать Shared Access Signature (SAS) для контейнера больших двоичных объектов. SAS должен иметь Write разрешение. Поскольку хранилище BLOB-объектов Windows Azure еще не поддерживает CORS (который поддерживается как Amazon S3, так и Google), вам нужно будет разместить HTML-страницу в хранилище BLOB-объектов, куда вы хотите, чтобы пользователи загружали файл. Затем вы можете использовать функциональность jQuery Ajax.

ИЗМЕНИТЬ ноябрь 2019 г.

Теперь вы можете обратиться к официальной документации:

• Пример клиентской библиотеки JavaScript службы хранилища Azure для операций с большими двоичными объектами
• Клиентская библиотека службы хранилища Azure для JavaScript

Первоначальный ответ

Существует Новый Клиентская библиотека JavaScript службы хранилища Azure для браузеров (предварительная версия).

(Все из этого сообщения взято из исходной статьи выше)

• Клиентская библиотека JavaScript для хранилища Azure позволяет использовать множество сценариев веб-разработки с использованием таких служб хранения, как Blob, Table, Queue и File, и совместима с современными браузерами.
• Новая клиентская библиотека JavaScript для браузеров поддерживает все функции хранилища, доступные в последней версии REST API 2016-05-31, поскольку она создана с помощью Browserify с использованием клиентской библиотеки хранилища Azure для Node.js.

Мы настоятельно рекомендуем использовать токены SAS. для аутентификации в службе хранилища Azure, поскольку клиентская библиотека JavaScript предоставляет пользователю токен аутентификации в браузере. Настоятельно рекомендуется использовать токен SAS с ограниченным объемом и временем. В идеальном веб-приложении ожидается, что внутреннее приложение будет аутентифицировать пользователей при их входе в систему, а затем предоставит клиенту токен SAS для авторизации доступа к учетной записи хранилища. Это устраняет необходимость аутентификации с использованием ключа учетной записи. Ознакомьтесь с примером функции Azure в нашем Репозиторий Github, который генерирует токен SAS по запросу HTTP POST.

Пример кода:

1. Вставьте следующие теги сценария в свой HTML-код. Убедитесь, что файлы JavaScript находятся в той же папке.

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

2. Теперь давайте добавим на страницу несколько элементов, чтобы начать перенос. Добавьте следующие теги внутри тега BODY. Обратите внимание, что при нажатии кнопки вызывается метод uploadBlobFromText. Мы определим этот метод на следующем шаге.

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

3. Пока что мы включили клиентскую библиотеку и добавили HTML-код, чтобы показать пользователю ввод текста и кнопку для начала передачи. Когда пользователь нажимает кнопку загрузки, вызывается uploadBlobFromText. Давайте определим это сейчас:

   <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>
   

Теперь, когда службы хранилища Windows Azure поддерживают CORS, вы можете это сделать. Вы можете увидеть объявление здесь: Windows Azure Storage Release - знакомство с CORS, JSON, минутными метриками и многим другим.

У меня есть простой пример, иллюстрирующий этот сценарий: http://www.contentmaster.com/azure/windows-azure-storage-cors/

В примере показано, как отправлять и скачивать непосредственно из частного большого двоичного объекта с помощью jQuery.ajax. В этом примере по-прежнему требуется серверный компонент для генерации подписи общего доступа: это позволяет избежать необходимости раскрывать ключ учетной записи хранения в клиентском коде.

Я написал сообщение в блоге с примером того, как это сделать, находится на GitHub

Он основан на Gaurav Mantris post и работает, размещая JavaScript в самом хранилище BLOB-объектов.

Вы можете использовать HTML5 File API, AJAX и MVC 3, чтобы создать надежный элемент управления загрузкой файлов для безопасной и надежной загрузки огромных файлов в хранилище BLOB-объектов Windows Azure с предоставлением возможности мониторинга хода выполнения и отмены операции. Решение работает следующим образом:

1. Клиентский JavaScript, который принимает и обрабатывает файл, загруженный пользователем.
2. Серверный код, обрабатывающий фрагменты файлов, отправленные с помощью JavaScript.
3. Клиентский интерфейс, вызывающий JavaScript.

Получите образец кода здесь: Надежная загрузка в хранилище BLOB-объектов Windows Azure с помощью элемента управления HTML5