概要
Railsのフォーム送信は色々いい感じにやってくれるが、少し変えたい時もある。
僕はフォーム外からファイルを追加したかった。
そういう時は、rails-ujsのajaxイベントハンドラを使うとフォーム送信に要所で割り込める。
Working with JavaScript in Rails#3.5 Rails-ujs event handlers ※ Rails 5.1以降の機能
以下、これを使ってフォーム外のファイルをフォーム内容と同時送信する例を紹介する。
やりたいことの例
本来フォーム内のnameだけ送信されるところ、フォーム外からファイルを追加送信したい。
ここでは仮に、フォーム外のnewImageFilesに画像ファイルを入れてあり、フォーム内容と一緒に送信したいという前提で話を進める。
<%= form_with model: [:user, @config] do |f| %>
<div>
<%= f.label :name, 'お名前' %>
<div>
<%= f.text_field :name %>
</div>
</div>
<div>
<%= f.submit '保存' %> <%#= 通常、フォームの内容(今回はname)のみ送信される %>
</div>
<% end %>
<script>
var newImageFiles = [] // ← フォーム外のファイルを送信に含めたい
</script>
※ form_withにlocalオプションを付けないでください。
参考：【Rails】form_withのlocalオプション
実装
// ...前略
<script>
var newImageFiles = [] // ← フォーム外のファイルを送信に含めたい
document.body.addEventListener('ajax:beforeSend', function(event) { // [1]
var detail = event.detail
var xhr = detail[0], options = detail[1]
// [2]コールバック
options.success = function() {}
options.error = function() {}
options.complete = function() {}
newImageFiles.forEach(image => {
options.data.append('config[images][]', image, image.name) // [3]
})
xhr.onreadystatechange = function () { // [4]
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) { // [4-1] 200の時、リロード
window.location.href = location.href
} else { // [4-1] 200以外の時、失敗表示
alert(`フォーム送信に失敗しました`)
}
}
}
xhr.send(options.data) // [5]
event.preventDefault() // [6] その後の通常処理を行わない
})
[1] ajax:beforeSendイベントから、フォームから送信予定のxhrとoptionsがとれる。これをカスタマイズする
document.body.addEventListener('ajax:beforeSend', function(event) { // [1]
var detail = event.detail
var xhr = detail[0], options = detail[1]
[2] optionsにコールバック設定がある。そのまま利用してもよいが今回は雑に全部削除
// [2]コールバック
options.success = function() {}
options.error = function() {}
options.complete = function() {}
[3] options.dataにフォーム外から含めたいデータをappend。
newImageFiles.forEach(image => {
options.data.append('config[images][]', image, image.name) // [3]
})
[4] onreadystatechangeを改めて書く。これも今回は最低限。
xhr.onreadystatechange = function () { // [4]
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) { // [4-1] 200の時、リロード
window.location.href = location.href
} else { // [4-1] 200以外の時、失敗表示
alert(`フォーム送信に失敗しました`)
}
}
}
[5] xhrを送信。
xhr.send(options.data) // [5]
[6] その後の通常処理をキャンセル。Rails5以前のjquery-ujsではこういうところでreturn falseと書くらしいので注意
event.preventDefault() // [6] その後の通常処理を行わない
感想
Railsの話だけどJavaScriptしか書いていない。
rails-ujsのこの機能は、ほかにも色々な用途で使えると思います。