2010-11-19 3 views
4

ユーザーがAmazon S3に直接ファイルをアップロードするためのHTML 5 AJAXライブラリ/フレームワークを探しています。目標は、Webサーバーに添付ファイルをアップロードしないようにすることです(WebサーバーがAmazonサーバーに転送するときにブロックされるため)。私の理解は、XDomainRequestを使用してこれが可能でなければならないが、私はどのように理解できない。HTML 5 Amazon S3ダイレクトアップローダー

Ruby-on-railsを実行していて、アップロードしたファイルにWebサーバーにポストされる一時的な名前(UUIDを使用)を割り当てて、後でそのファイルを名前を変更してpaperclipと統合できるようにしたい。

アイデア?これはjQueryが処理できるものですか? Flashはこのプロジェクトのオプションではありません。ありがとう!

編集:

私は基本ポストの作業を取得するために管理が、まだ問題を抱えているのです。私は、どのヘッダが必要なのか正確にはわかりません。また、リクエストにAmazonの必須パラメータをエンコードする方法もあります(リクエストヘッダーに入れることはできますか?)。

const XMLHTTPFactories = [ 
    function() { return new XDomainRequest(); }, 
    function() { return new XMLHttpRequest(); }, 
    function() { return new ActiveXObject("Msxml2.XMLHTTP"); }, 
    function() { return new ActiveXObject("Msxml3.XMLHTTP"); }, 
    function() { return new ActiveXObject("Microsoft.XMLHTTP"); }, 
]; 

var xhr = null; 

for (var i = 0; i < XMLHttpFactories.length; i++) { 
    try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; } 
} 

$(this).change(function() { 

    for (var i = 0; i < this.files.length; i++) { 
    var file = this.files[i]; 

    xhr.open(settings.method, settings.url, true); 
    xhr.setRequestHeader("Cache-Control", "no-cache"); 
    xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
    xhr.setRequestHeader("Access-Control-Allow-Origin", "*") 
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    xhr.setRequestHeader("X-File-Name", file.fileName); 
    xhr.setRequestHeader("X-File-Size", file.fileSize); 

    xhr.send(file); 
    } 

編集:ここでは、これまでの私の進歩である私はcrossdomain.xmlファイルをアップロードした

XMLHttpRequest cannot load http://bucket.s3.amazonaws.com/ . Origin http://local.app is not allowed by Access-Control-Allow-Origin.

:さらにアップデートした後

が、私は次のエラーを取得することができましたワイルドカード(*)ドメインからのアクセスを許可します。継続するかどうかはわからない...

編集:

行わより多くの調査を持った後、私はJavaScriptをPOSTがS3に可能ではないかもしれないことを考え始めています。移転する前にEC2インスタンスに転記する必要がありますか?私はマイクロインスタンスを確保することができるかもしれませんが、私は可能な限りS3に直接行くことを好むでしょう!ありがとう!

編集:

私はアマゾンのフォーラムに質問を投稿し、任意のフィードバックを受け取っていません。相互参照については、他の投稿はhttps://forums.aws.amazon.com/message.jspa?messageID=206650#206650で見つけることができます。

答えて

4

もう一方の側の問題an Access-Control-Allow-Origin headerを作成する必要があります。あなたの場合、もう片面はAmazon S3サーバです。そのヘッダにあなたのドメインが記述されている場合を除き、クロスサイトリクエストを行うことはできません。

Amazon S3 now supports Cross Origin Resource Sharingとなり、バケットに1つ以上のCORSルールを追加することで、クロスドメインアクセス用に任意のS3バケットを設定できます。各ルールでは、バケットにアクセスする必要があるドメインと、許可するHTTP動詞のセットを指定できます。

+0

返信いただきありがとうございます! Amazon S3で 'Access-Control-Allow-Origin'ヘッダーを設定できるかどうか分かりますか? –

+0

@ケビン私はこれを研究してきました。 Amazon S3はこのヘッダをバケット*または*オブジェクトに設定することはサポートしていません。詳細は、[スレッド](https://forums.aws.amazon.com/message.jspa?messageID=160131)を参照してください。 Amazonは、彼らの(不足している)回答に応じて、将来それをサポートすることに全く関心がないようだ。 –

+0

@Danありがとうございます。私は実際にそのスレッドの「ポスター」であり、希望をあきらめました。 –

1

これは、S3クレデンシャルをJavaScriptで公開する必要があることを意味します。あなたはそれを望んでいません。

最高の解決策は、Paperclipを使用することです。はい、まずサーバーにアップロードする必要がありますが、少なくとも安全です。

コメントを確認してください。

+2

いいえ、そうではありません。 Amazonは、有効期限トークンと組み合わせて秘密鍵のHMAC SHA-2エンコーディングをサポートしています。彼らは定期的な投稿(http://doc.s3.amazonaws.com/proposals/post.html)を介して直接アップロードを許可しています。私はそれがAJAXである必要があります。 –

+1

それについて知らなかった! – Ariejan

+0

ええ、まだ私のバグAriejanを修正する方法がわかりません。誰も知っている?上記の投稿を参照してください! –

1

S3をホストすることができますhtmlページ問題はないが、この作業を持っているようです。 バケットはサーバーのURLになります。 S3 Bucket Explorerのようなツールを使用すると、バケット内の任意のHTMLページに対してワンクリックでURLを取得できます。

次に、XMLHttpRequestのPUTコマンドを使用してファイルをアップロードすることができます。

これは、基本的にJQuery-HTML5-UploadプラグインがAmazon S3でどのように機能するかを示しています(Issue#12を参照)。

実際、変数にプラグインしてXMLHttpRequest open()メソッドと組み合わせて使用​​するだけで、Amazon S3 REST APIの構文を試すことができます。

多元的な平和。

1

Amazonがこれを可能にするクロスオリジンリソース共有(CORS)のサポートを最後に追加しました:

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource -sharing.html

4

今日、AmazonはAmazon S3でクロスソースリソース共有(CORS)を完全にサポートすることを発表しました。 JavaScriptとHTML5を使用するWebアプリケーションを簡単に構築して、Amazon S3のリソースとやり取りし、Amazon S3へのHTML5のドラッグアンドドロップアップロードを実装したり、アップロードの進捗状況を表示したり、コンテンツを更新したりすることができます。

0

s3_drect_uploadと呼ばれる優れたレール宝石があります。これは、箱から欲しいものを正確に守ります。これは、ファイルの名前を変更することをサポートするhtml5/javascriptアップローダーです。