web-dev-qa-db-ja.com

Meteorでファイルのアップロードをどのように処理しますか？

Meteorでファイルのアップロードを処理する標準的な方法は何ですか？

javascriptfile-uploadmeteor
76
David

現在、HTTPサーバーと対話したり、HTTPに関連する何かを行う方法はないようです。

できることは、Meteor.methodsによって公開されたRPCメソッドを介してサーバーと通信するか、公開されたmongoDB APIを介してmongoDBと直接通信することだけです。

17
Raynos

http://filepicker.io を使用しました。ファイルをアップロードしてS3に保存し、ファイルのあるURLを返します。次に、URLをDBに追加します。

  1. Filepickerスクリプトをクライアントフォルダーに取得します。

    wget https://api.filepicker.io/v0/filepicker.js

  2. Filepicker入力タグを挿入します

    <input type="filepicker" id="attachment">

  3. 起動時に、それを初期化します：

    Meteor.startup( function() {
    filepicker.setKey("YOUR FILEPICKER API KEY");
    filepicker.constructWidget(document.getElementById('attachment'));
});

  4. イベントハンドラーを接続する

    Templates.template.events({
    'change #attachment': function(evt){
        console.log(evt.files);
    }
});
44
jlg_foil

画像については、ファイルをディスクに書き込まないことを除いて、 Dario's と同様の方法を使用します。データをモデルのフィールドとしてデータベースに直接保存します。 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);
  }
});
26
Harry Love

Meteor.methodsとHTML5 FileのAPIを使用して ファイルアップロードの実装 を思いついたところです。どう考えているか教えてください。

19
Darío

新しいパッケージがあります： edgee：slingshot 。それはあなたの流星サーバーにファイルをアップロードしませんが、流星サーバーが高価なファイル転送を処理する代わりに流星アプリを提供するという主な目的に集中できるようにするので、その方が良いです。

代わりに、クラウドストレージサービスにファイルをアップロードします。現在、AWS S3とGoogle Cloud Filesをサポートしていますが、Rackspace Cloud Filesもサポートし、将来的にはCloudinaryもサポートする予定です。

あなたの流星サーバーは単にコーディネーターとして機能します。

Direct VS Indirect uploads

また、非常に用途が広く軽量なパッケージです。

11
d_inevitable

今回の最適なソリューションは次のとおりです。 collectionFS を使用します。

meteor add cfs:standard-packages
meteor add cfs:filesystem

クライアント：

Template.yourTemplate.events({
    'change .your-upload-class': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var yourFile = new FS.File(file);
            yourFile.creatorId = Meteor.userId(); // add custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // do callback stuff
                }
            });
        });
    }
});

サーバ：

YourFileCollection = new FS.Collection("yourFileCollection", {
    stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})]
});
YourFileCollection.allow({
    insert: function (userId, doc) {
        return !!userId;
    },
    update: function (userId, doc) {
        return doc.creatorId == userId
    },
    download: function (userId, doc) {
        return doc.creatorId == userId
    }
});

テンプレート：

<template name="yourTemplate">
    <input class="your-upload-class" type="file">
</template>
7
Raz

router と呼ばれる雰囲気パッケージがあり、それだけが可能です。

実際、ファイルのアップロードを処理する最善の方法は collectionFS です

7
Micha Roon

非常に大きなファイルを必要としない場合や、ファイルを短時間だけ保存する場合は、この単純なソリューションが非常に有効です。

あなたの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>

これは、大きなファイルやファイルを集中的に使用するアプリケーション向けの最も堅牢でエレガントなソリューションではないかもしれませんが、ファイルの単純なアップロードとダウンロード/レンダリングを実装したい場合、あらゆる種類のファイル形式で非常にうまく機能します。

3
Steeve Cannon

Amazon S3に直接アップロードして、jsアップローダーなどでいくつかのトリックを行うことができます。 http://aws.Amazon.com/articles/1434

3
Luan

meteor roadmap で、「ファイルアップロードパターン」機能が「1.0以降」にスケジュールされていることがわかります。だから、公式の方法を見るのを待たなければなりません。

今のところ、最良の方法の1つは "collectionFS" （作成時の0.3.x開発プレビュー）を使用することです。

または inkfilepicker（ex。filepicker.io） ここで提案されているとおり。使用するのは簡単ですが、これには明らかにユーザー側からのインターネット接続が必要です。

遊ぶだけなら、html5機能を利用することもできます。 that のようなもの。

2
nha

Filepicker.ioのコストをかけずに、最も投票された回答と同じアクションを実行するには、このパッケージの指示に従ってください。 https://github.com/Lepozepo/S

次に、リンクを取得するには、次のようなコードを使用します。最後に、secureLinkによって返されたURLをDBに接続します。

Template.YourTemplate.events({
  "click button.upload": function() {
    var files = $("input.file_bag")[0].files;
    S3.upload(files, "/subfolder", function(e,r) {
      console.log(r);
      Session.set('secureLink', r.secure_url);
    })
  }
});

Template.YourTemplate.helpers({
  "files": function() {
    return S3.collection.find();
  },

  "secureLink": function() {
    return Session.get('secureLink');
  }
});
2
Sean L

ここにもう一つの解決策があります：

https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/

これは、チャンクアップロード、プログレスバーなどをサポートするBlueimpのアップロードソリューションを使用しています。

2
tomitrescak