Meteorでファイルのアップロードを処理するための標準的な方法は何でしょうか?
12 に答える
http://filepicker.ioを使用しました。彼らはファイルをアップロードし、それをS3に保存し、ファイルがある場所のURLを返します。次に、URLをDBに挿入します。
filepickerスクリプトをクライアントフォルダーに入れます。
wget https://api.filepicker.io/v0/filepicker.js
filepicker入力タグを挿入します
<input type="filepicker" id="attachment">
スタートアップで、それを初期化します:
Meteor.startup( function() { filepicker.setKey("YOUR FILEPICKER API KEY"); filepicker.constructWidget(document.getElementById('attachment')); });
イベントハンドラーをアタッチする
Templates.template.events({ 'change #attachment': function(evt){ console.log(evt.files); } });
画像については、ファイルをディスクに書き込まないことを除いて、 Darioと同様の方法を使用します。モデルのフィールドとしてデータをデータベースに直接保存します。HTML5 File APIをサポートするブラウザーのみをサポートする必要があるため、これは私にとってはうまくいきます。そして、単純な画像サポートだけが必要です。
Template.myForm.events({
'submit form': function(e, template) {
e.preventDefault();
var file = template.find('input type=["file"]').files[0];
var reader = new FileReader();
reader.onload = function(e) {
// Add it to your model
model.update(id, { $set: { src: e.target.result }});
// Update an image on the page with the data
$(template.find('img')).attr('src', e.target.result);
}
reader.readAsDataURL(file);
}
});
Meteor.methods と HTML5 File の API を使用して、ファイル アップロードの実装を考え出しました。どう考えているか教えてください。
現在、HTTP サーバーとやり取りしたり、HTTP に関連することを行う方法はないようです。
できることは、Meteor.methods によって公開された RPC メソッドを介してサーバーと対話するか、公開された mongoDB API を介して直接 mongoDB と対話することだけです。
それを可能にするルーターと呼ばれる雰囲気パッケージがあります。
実際、ファイルのアップロードを処理する最良の方法はcollectionFSになりました
非常に大きなファイルを必要としない場合、またはファイルを短期間だけ保存する場合は、この単純なソリューションが非常にうまく機能します。
あなたのhtmlで...
<input id="files" type="file" />
テンプレート イベント マップで...
Template.template.events({
'submit': function(event, template){
event.preventDefault();
if (window.File && window.FileReader && window.FileList && window.Blob) {
_.each(template.find('#files').files, function(file) {
if(file.size > 1){
var reader = new FileReader();
reader.onload = function(e) {
Collection.insert({
name: file.name,
type: file.type,
dataUrl: reader.result
});
}
reader.readAsDataURL(file);
}
});
}
}
});
コレクションを購読し、テンプレートでリンクをレンダリングします...
<a href="{{dataUrl}}" target="_blank">{{name}}</a>
これは、大きなファイルやファイル集約型のアプリケーションにとって最も堅牢で洗練されたソリューションではないかもしれませんが、ファイルの単純なアップロードとダウンロード/レンダリングを実装したい場合は、あらゆる種類のファイル形式で非常にうまく機能します.
js アップローダーなどでいくつかのトリックを実行して、Amazon S3 に直接アップロードしてみることができます。 http://aws.amazon.com/articles/1434
「ファイルアップロードパターン」機能は「1.0以降」に予定されていることが流星のロードマップでわかります。したがって、正式な方法が表示されるまで待つ必要があります。
今のところ、最良の方法の 1 つは「collectionFS」を使用することです (これは執筆時点で 0.3.x dev プレビューです)。
または、ここで提案されているように、inkfilepicker (例: filepicker.io) 。使い方は簡単ですが、これには明らかにユーザー側からのインターネット接続が必要です。
遊んでみるだけなら、html5 の機能を利用することもできます。そのようなもの。