Ember.js コントローラーがあり、jquery ファイルのアップロードを使用してファイルを Rails コントローラーに送信しようとしています。
私はこれから始めました:
myControllerAction: ->
$('#fileupload').fileupload(
url: "/api/v1/comics"
dataType: 'json'
formData:
comic: {
title: self.get('comicTitle')
prompt_one_id: self.get('prompts')[0].get('id')
prompt_two_id: self.get('prompts')[1].get('id')
}
)
これは機能しましたが、ファイルが選択されるとすぐにフォームが送信されました。ユーザーがフォームを送信するときにすべてを実行したい。だから私はこれを試しました:
didInsertElement: ->
$('#fileupload').fileupload(
url: "/api/v1/comics"
dataType: 'json'
formData:
comic: {
title: self.get('comicTitle')
prompt_one_id: self.get('prompts')[0].get('id')
prompt_two_id: self.get('prompts')[1].get('id')
}
add: (e, data) ->
data.submit()
progressall: (e, data) ->
progress = parseInt(data.loaded / data.total * 100, 10)
$('#progress .bar').css('width', progress + '%')
)
myControllerAction: ->
self = @
$('#fileupload').fileupload('add')
しかし、それはうまくいきません。JavaScript エラーがスローされます。
Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'add'
要素の挿入時にすべてを設定すると、オブジェクトが初期化されると思いました。だから私はどこが間違っているのか分かりません。誰にも提案はありますか?
編集:テンプレートを追加するには
<form enctype="multipart/form-data">
<div class="control-group">
<label class="control-label" for="inputTitle">Title</label>
<div class="controls">
{{input type="text" valueBinding="comicTitle"}}
{{input type="file" id="fileupload" valueBinding="comicFile"}}
</div>
</div>
<button {{action myControllerAction}} id="upload_comic" class="btn btn-inverse">Upload Comic</button>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</form>