web-dev-qa-db-ja.com

ブラウザーから直接Azure Blob Storageにファイルをアップロードしますか？

別のサーバーを仲介として使用せずに、WebユーザーがファイルをAzure BLOBストアに直接アップロードできるようにするHTMLフォームを作成することは可能ですか？ S3とGAWブロブストアの両方でこれが可能ですが、Azureブロブストレージのサポートが見つかりません。

azureazure-storage-blobsblobstorage
21
user1144313

ブラウザから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

2番目の投稿（私が書いたもの）はHTML 5 File APIを利用しているため、すべてのブラウザーで機能するとは限りません。

基本的な考え方は、ブロブコンテナーのShared Access Signature (SAS)を作成することです。 SASにはWrite権限が必要です。WindowsAzure Blob Storageは [〜＃〜] cors [〜＃〜] をサポートしていないため（これははAmazon S3とGoogleの両方でサポートされています）。ユーザーがファイルをアップロードするblobストレージでHTMLページをホストする必要があります。その後、jQueryのAjax機能を使用できます。

9
Gaurav Mantri

Windows AzureストレージサービスがCORSをサポートするようになったので、これを実行できます。こちらの発表をご覧ください Windows Azureストレージリリース-CORS、JSON、ミニッツメトリックなどの紹介 。

ここにこのシナリオを説明する簡単な例があります： http://www.contentmaster.com/Azure/windows-Azure-storage-cors/

この例は、jQuery.ajaxを使用してプライベートBLOBから直接アップロードおよびダウンロードする方法を示しています。この例でも、共有アクセス署名を生成するためにサーバーコンポーネントが必要です。これにより、クライアントコードでストレージアカウントキーを公開する必要がなくなります。

5
Dominic Betts

EDIT 2019年11月

これで公式ドキュメントを参照できます：

最初の答え

ブラウザー用の新しいAzure Storage JavaScriptクライアントライブラリ（プレビュー） があります。

（この投稿のすべては上記の元の記事からのものです）

  • Azure StorageのJavaScriptクライアントライブラリは、Blob、Table、Queue、Fileなどのストレージサービスを使用する多くのWeb開発シナリオを可能にし、最新のブラウザーと互換性があります
  • ブラウザ用の新しいJavaScriptクライアントライブラリは、Node.js用のAzureストレージクライアントライブラリを使用してBrowserifyで構築されているため、最新のREST APIバージョン2016-05-31で利用可能なすべてのストレージ機能をサポートします

JavaScriptクライアントライブラリはブラウザーでユーザーに認証トークンを公開するため、 SASトークン を使用してAzure Storageで認証することを強くお勧めします。範囲と時間が制限されたSASトークンを強くお勧めします。理想的なWebアプリケーションでは、バックエンドアプリケーションがログオン時にユーザーを認証し、SASトークンをクライアントに提供して、ストレージアカウントへのアクセスを承認することが期待されます。これにより、アカウントキーを使用して認証する必要がなくなります。 SASトークンを生成するGithubリポジトリのAzure関数サンプルを確認してください。 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>
4
Thomas

これを行う方法の例を含む blog の投稿を書きました コードはGitHubにあります

Gaurav Mantris post に基づいており、Blob Storage自体でJavaScriptをホストすることで機能します。

1
Martin

HTML5ファイルAPI AJAXおよびMVC 3を使用して、堅牢なファイルアップロードコントロールを構築し、操作の進行状況の監視と操作のキャンセルを備えたWindows Azure BLOBストレージに安全かつ確実に巨大なファイルをアップロードできます。ソリューションは以下のように機能します。

  1. ユーザーがアップロードしたファイルを受け入れて処理するクライアント側JavaScript。
  2. JavaScriptによって送信されたファイルチャンクを処理するサーバー側コード。
  3. JavaScriptを呼び出すクライアント側のUI。

ここでサンプルコードを取得： HTML5コントロールを介したWindows Azure Blob Storageへの信頼できるアップロード

0
AvkashChauhan