Railsのviewからsubmitでファイルuploadしていたのを、ajaxでuploadするときのデータの作り方

Question

環境

wsl2 Ubuntu18.04
ruby 2.5.1p57
rails 4.0.0

実現したいこと

ajaxでファイルをrailsにuploadする (今は普通にsubmitしている)

困っていること

ajaxのrequestのデータの作り方。

submitで送られているファイルデータを作成してサーバー側に送ればokと判断
↓
サーバー側でrequestのデータの中身を確認

{
  "file"=>#<ActionDispatch::Http::UploadedFile:0x0055d8dc65deb0 
  @tempfile=#<Tempfile:/tmp/RackMultipart20200619-23-1ajva0e>, 
  @original_filename="hogeA.png", 
  @content_type="image/png", 
  @headers="Content-Disposition: form-data; name=\"[hoge_groups][][file]\"; 
  xxxfilename=\"hogeA.png\"\r\nContent-Type: image/png\r\n">
  
  "file" => (二個目のデータ１っ個目と同じように)...
}

このデータをクライエント側で作ればよいが、tempfileやActionDispatchなどをどのように作成すれば良いのか不明で質問させていただきました。
よろしくお願いいたします。

*追記

サーバー側で送られるデータは下記の通りでしたが (ここではdataという変数とします)

{
  "file"=>#<ActionDispatch::Http::UploadedFile:0x0055d8dc65deb0 
  @tempfile=#<Tempfile:/tmp/RackMultipart20200619-23-1ajva0e>, 
  @original_filename="hogeA.png", 
  @content_type="image/png", 
  @headers="Content-Disposition: form-data; name=\"[hoge_groups][][file]\"; 
  xxxfilename=\"hogeA.png\"\r\nContent-Type: image/png\r\n">
  
  "file" => (二個目のデータ１っ個目と同じように)...
}

実際にrails内でsaveされているデータはここのfile部分(data[:file])のみでした。

"file"=>#<ActionDispatch::Http::UploadedFile:0x0055d8dc65deb0 

となると、このデータをjs側で作成するのがさらに分からなくなりましたが。。。汗

*追記2

下記の様なデータをFormData.append('file', data)としてサーバーに送る
(このデータはinputで得られたfile objectです)

サーバー側でこの値を Rails.logger.info を使用し表示させると下記のように表示される

[object File]

ちなみにviewから普通にsubmitさせた場合、サーバー側では↓のように表示

#<ActionDispatch::Http::UploadedFile:0x0055ee195fd950>

[object File]では値が取得できないのか、保存もされません。
何か勘違いしていないか確認できたら幸いです。

追記3

[object File]はただの文字列でしたので、FileReaderクラスを使用し、ファイルそのもののデータを送信してみましたが結果は一緒でした

//こういうファイルそのもののデータ
data:image/png;base64,iVBORw0................................... 

Answer 1

fileオブジェクトをJSの変数に保管し、下記のように指定しajaxで送信

formData.append("file", FileObject);

Answer 2

[object File]

これはファイルを発信したではなく、ファイルのデフォルト文字列表示を発信してしまったのではないでしょうか？console.log(data)ではなくconsole.log(String(data))をブラウザーで実行したらそれをみれると思います。

つまり、FormData.append('file', data)はdataを文字列に変換してしまいました。ドキュメントを読むとそんなはずがないけれど。

フォームには<input type="file">だけだとしたら、いっそappendをすててフォーム全体を使ってみましょう：

async function submitFileData() {
  formData = new FormData(fileInputForm);
  await fetch('/url/to/route/', {
    method: 'POST',
    body: formData,
  });
}
submitFileData()

Comments

[kazoogon]

回答ありがとうございます。
> これはファイルを発信したではなく、ファイルのデフォルト文字列表示を発信
その通りでした

> フォームには<input type="file">だけだとしたら、いっそappendをすててフォーム全体を使ってみましょう
この質問では分かりやすく最低限の機能しか書いてないですが、実際はファイル選択してpreviewする (fb messangerのように)ので、そのままフォームは使えないんです涙

(*追記３にてnew try記載しました)

[YufanLou]

previewは大丈夫です。ファイルの内容が変わらない限り、previewにinputから直接にFileを取得して、POSTにフォームを使えばいいです。

[kazoogon]

> previewにinputから直接にFileを取得
<img data-file='${reader.result}'>
(readerはnew FileReader())
こんな感じでpreviewにdata attributeとして渡す
↓
サーバーにその値を渡す

が現状です、これが「記載３」の内容です

Answer 3

ActionDispatchやTempFileはRubyオブジェクトで、
Railsがクライアントからのリクエストを受けてから作成するもので、
クライアント側では作成できないはずです。

かつてRails5にはなりますが、画像ファイルをajaxでRailsサーバーに送信した際は、FormDataをajaxで送信するだけで、RailsがよしなにActionDispatchやTempFileを作成してくれたはずです。
あとは、submitしている時同じように扱うことができました。

参考になれば幸いです。

参考:
https://qiita.com/sho012b/items/f2558db5dad97d7e1b1d
https://techacademy.jp/magazine/21089

Comments

[kazoogon]

回答ありがとうございます、FormDataを使用したら良いとのこと助かりました。
またまだ上手くいっていないので、「追記2」させていただきました。もし何か分かりましたら回答いただけると幸いです。

[Cojiro]

そうでしたか。
以前実装したソースも手元に残ってないので、これ以上はパッとお答えできないです。

あとは、
ajaxでサーバーにファイルを送ったあと、どういうレスポンスを返したいか次第ですが、
送信するだけだったらform_tagにremote: trueをつけて送信すればさくっとできるような気がします。
remote: trueでがっつり実装するのであれば、この辺りの記事が参考になると思います。
https://qiita.com/__tambo__/items/45211df065e0c037d032
https://qiita.com/hc_isobe/items/a29860d3e86a6bc5fd3e

お役に立てず申し訳ありません。