EmberJSとEmber Data)を使用してファイルフィールドを含むフォームを実装するためのコード例やドキュメントを誰かが提供できますか?
Ember Dataはすでに知っていますが、ファイルのアップロードを正しく実装する方法がわかりません。
これは、ファイルのアップロードを行うために作成した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]);
}
}
});
これを実際に実行して本格的なスパイクを確認したい場合は、最近行ったマルチファイルアップロードの例を確認してください。
以下のリンクをご覧ください。最初のリンクまたはブログ投稿には、emberjsでアップロードを処理する動作中のjsfiddleへのリンクが含まれています。私はブログを書いたり、フィドルを作成したりしていないことに注意してください。しかし、それはあなたの問題を解決するはずです。
http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html
それはかなり簡単です、一般的なステップは次のとおりです:
大きなファイルをエンコードする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/
私はいくつかの異なる解決策を試し、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入力と組み合わせて、画像のプレビューとクライアント側のファイルタイプの検証を有効にする必要があります。