web-dev-qa-db-ja.com

Ember dataを使用したファイルのアップロード

EmberJSとEmber Data）を使用してファイルフィールドを含むフォームを実装するためのコード例やドキュメントを誰かが提供できますか？

Ember Dataはすでに知っていますが、ファイルのアップロードを正しく実装する方法がわかりません。

ember.js
23
Rafael Vega

これは、ファイルのアップロードを行うために作成したember-dataアダプターの一部です（同じサーバー-クロスドメインではありません）

DS.DjangoRESTAdapter = DS.RESTAdapter.extend({
        bulkCommit: false,

        createRecord: function(store, type, record) {
            var root = this.rootForType(type), json = {};

            var data = new FormData();
            data.append('username', record.get('username'));
            data.append('attachment', record.get('attachment'));

            this.Django_file_ajax('http://localhost:8000/people/new/', "POST", {
                data: data,
                context: this,
                success: function(pre_json) {
                    json[root] = pre_json;
                    this.didCreateRecord(store, type, record, json);
                }
            });
        },

        Django_file_ajax: function(url, type, hash) {
            hash.url = url;
            hash.type = type;
            hash.contentType = false;
            hash.processData = false;
            hash.context = this;

            jQuery.ajax(hash);
        }

    });

})();

「FormData」ヘルパーを使用してマルチパートファイルのアップロードを行っているため、IE8に対応しているわけではありませんが、概念実証としては優れています。

上記のアダプターを使用した残り火データモデルは次のとおりです

PersonApp.Person = DS.Model.extend({
  id: DS.attr('number'),
  username: DS.attr('string'),
  attachment: DS.attr('string')
});

これがハンドルバーテンプレートです

<script type="text/x-handlebars" data-template-name="person">
{{view PersonApp.UploadFileView name="logo_image" contentBinding="content"}}
</script>

これがカスタムemberビューです

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person'
});

PersonApp.UploadFileView = Ember.TextField.extend({
    type: 'file',
    attributeBindings: ['name'],
    change: function(evt) {
      var self = this;
      var input = evt.target;
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var that = this;
        reader.onload = function(e) {
          var fileToUpload = e.srcElement.result;
          var person = PersonApp.Person.createRecord({ username: 'heyo', attachment: fileToUpload });
          self.get('controller.target').get('store').commit();
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
});

これを実際に実行して本格的なスパイクを確認したい場合は、最近行ったマルチファイルアップロードの例を確認してください。

https://github.com/toranb/ember-file-upload

16
Toran Billups

以下のリンクをご覧ください。最初のリンクまたはブログ投稿には、emberjsでアップロードを処理する動作中のjsfiddleへのリンクが含まれています。私はブログを書いたり、フィドルを作成したりしていないことに注意してください。しかし、それはあなたの問題を解決するはずです。

http://chrismeyers.org/2012/06/12/ember-js-handlebars-view-content-inheritance-image-upload-preview-view-object-binding/ -デッドリンク

http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html

7
brg

それはかなり簡単です、一般的なステップは次のとおりです：

  1. Ember内で入力をフックします。
  2. Input要素で指定されたローカルファイルからデータを読み取ります。
  3. データをbase64としてエンコードしました。
  4. Ember-dataモデルの値をbase64文字列に設定します。
  5. サーバーで、base64文字列と出来上がりをデコードします。バイナリファイルデータはサーバー上にあります。

大きなファイルをエンコードするbase64にはパフォーマンスの問題がありますが、小さい画像やテキストの場合は問題になりません。

Ember Dataの 'outside'ファイルを送信し、応答（モデルを表すJSONペイロードなど）をpushPayload経由でストアにプッシュすることもできます。 FormDataまたはXHR2の他のメソッドを使用できます。

ファイルのクライアント側の操作について詳しくは、こちらをご覧ください： http://www.html5rocks.com/en/tutorials/file/dndfiles/

ファイルアップロード用のXHR2とFormDataの詳細については、こちらをご覧ください： http://www.html5rocks.com/en/tutorials/file/xhr2/

7
sandstrom

私はいくつかの異なる解決策を試し、FormDataアダプターとファイル変換を作成することになりました。次に、ファイルデータをアップロードする必要があるモデルは、FormDataAdapterを使用して、ファイル属性をタイプ「file」として定義できます。

app/transforms/file.coffee

FileTransform = DS.Transform.extend
  serialize: (jsonData) ->
    jsonData

  deserialize: (externalData) ->
    externalData

app/models/user.coffee

User = DS.Model.extend
    avatar: DS.attr('file')

app/adapters/form_data.coffee

get = Ember.get;

App.FormDataAdapter = ApplicationAdapter.extend
  ajaxOptions: (url, type, hash) ->
    hash = hash || {}
    hash.url = url
    hash.type = type
    hash.dataType = 'json'
    hash.context = @

    if hash.data and type != 'GET' and type != 'DELETE'
      hash.processData = false
      hash.contentType = false
      fd = new FormData()
      root = Object.keys(hash.data)[0]
      for key in Object.keys(hash.data[root])
        if hash.data[root][key]
          fd.append("#{root}[#{key}]", hash.data[root][key])

      hash.data = fd

    headers = get(@, 'headers')
    if headers != undefined
      hash.beforeSend = (xhr) ->
        for key in Ember.keys(headers)
          xhr.setRequestHeader(key, headers[key])

    hash

app/adapters/user.coffee

UserAdapter = FormDataAdapter.extend()

CoffeeScriptについては申し訳ありませんが、このブログ投稿から貼り付けられています： http://blog.mattbeedle.name/posts/file-uploads-in-ember-data/ 。あなたはそこでより詳細な説明を読むことができます。このソリューションは、おそらくHTML5 FileReader入力と組み合わせて、画像のプレビューとクライアント側のファイルタイプの検証を有効にする必要があります。

2
Matt Beedle