4

私はWebアプリケーションの潜在的なフレームワークとしてMeteorをチェックしてきましたが、私ができる必要があることの1つは、クライアントがアプリを介してファイルをアップロードできるようにすることです。この機能を組み込む手段としてFilepicker.ioをチェックし始めましたが、ドラッグアンドドロップフィールドをレンダリングするのに問題があります。テストRailsアプリでは正常に動作しますが、私のデモMeteorアプリでは、空白の入力ボックスのように見えます。

4

4 に答える 4

4

ライブラリをwgethttp://api.filepicker.io/v1/filepicker.jsで/clientフォルダーにインポートしました

それなら私はただ

meteor.startup ->
  filepicker.setKey 'lalala'

次に、ウィジェットを作成します

Template.fileUpload.rendered = ->  
  filepicker.constructWidget document.getElementById('uploadWidget')
于 2012-10-29T15:26:02.497 に答える
3

簡単にするために、Meteoriteと一緒にインストールできるAtmosphereパッケージ（ github loadpicker ）を公開しました。

filepickerスクリプトは呼び出されると動的にロードされ、キーはfilepicker成功コールバックに設定されます。作成されたテンプレートまたはレンダリングされたテンプレートからスクリプトをロードするために保存されます。

インストール：

mrt add loadpicker

個人のfilepicker.ioキーと、ドラッグアンドドロップ領域を作成するためのコールバック関数を使用してスクリプトを呼び出します。

loadPicker(key, cb);

サンプル統合は次のようになります。

 if (Meteor.isClient) {
  Session.set("widgetSet", false);
  var key = "xxxxxxxxxxxxxxxxx";
  var cb = function () {
    filepicker.makeDropPane($('#exampleDropPane')[0], {
      dragEnter: function() {
        $("#exampleDropPane").html("Drop to upload").css({
          'backgroundColor': "#E0E0E0",
          'border': "1px solid #000"
        });
      }
    });
  };

  Template.home.created = function ( ) { 
    if (!Session.get("widgetSet")) {  
      loadPicker(key, cb);
    }
  };
}

HTML

<h1>Drop Pane</h1>
<div id="exampleDropPane">Drop Here!</div>
<div><pre id="localDropResult"></pre></div>

CSS

#exampleDropPane {
  text-align: center;
  padding: 20px;
  background-color: #F6F6F6;
  border: 1px dashed #666;
  border-radius: 6px;
  margin-bottom: 20px;
}
于 2013-05-14T10:08:24.203 に答える
1

私は現在同じ問題に取り組んでいますが、それはテンプレートがレンダリングされた後にファイルピッカーをレンダリングする必要があるためです。現在、filepickerはテンプレートの前に実行されるため、テンプレートがレンダリングされた後、ファイルピッカーのレンダリングコードを再度実行します。

filepicker.constructWidget(document.getElementById('inputID'));
于 2012-10-22T17:16:15.923 に答える
-2

次のコードはcoffeescriptにあります。

まず、キーを適切に設定する必要があります。

Meteor.startup ->
  filepicker.setKey 'YOUR API KEY'

次に、APIを使用してクライアントの動作を設定できます。

'click .upload': (e) ->
  filepicker.pickMultiple
    extensions: ['.png', '.jpg', '.gif', '.doc', '.xls', '.ppt', '.docx', '.pptx', '.xlsx', '.pdf', '.txt']
    container: 'modal'
    services: ['COMPUTER']
    (fpfiles) =>
        #do whatever you want to process the data filepicker provided you after upload was done
        Meteor.call 'uploadFiles', fpfiles
于 2012-10-23T05:01:03.733 に答える