Загрузить файл в Azure Blob Storage прямо из браузера?

Ответ 1

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

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

Второе сообщение (написанное мной) использует API файлов HTML 5 и, следовательно, не будет работать во всех браузерах.

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

Ответ 2

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

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

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

Ответ 3

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

Он основан на сообщении Gaurav Mantris и работает путем размещения JavaScript в самом хранилище Blob.

Ответ 4

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

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

Получить пример кода здесь: Надежные загрузки в хранилище Windows Azure Blob через элемент управления HTML5

Ответ 5

Существует Новая клиентская библиотека JavaScript для Azure Storage для браузеров (Preview).

(Все, начиная с этой статьи, происходит из оригинальной статьи выше)

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

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

Пример кода:

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

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

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

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

• До сих пор мы включили клиентскую библиотеку и добавили код 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>