3

クライアントサイドから画像アップロードする際の手段について質問です。

JSでFormDataを用いたAjaxアップロードについては散見しますが、通常のHTTPでPOST送信する方法が見つからず、その手段について知りたいです。

前提条件は、

  • クライアントサイドで画像ファイル選択
  • クロップ処理
  • dataURIの形式で取得(またはBlob変換)

この際のdataURI(BloB)データをフォームの<input type="file">に落としこむなどで、Ajaxではなく通常POSTでアップロード可能でしょうか?

以下の制限については調べてきた中で把握しています。

  • inputタグのfileはセキュリテイ上JSから選択ファイルを指定できない

バックエンドはRailsでcarrierwaveを利用しています。
dataURIを文字列形式で送り、処理する手法はいくつか見つかりました。

しかし、一般的な手法があるのであれば知りたい次第です。

皆様よろしくお願いいたします。

3
  • クライアントサイドでの画像クロップ処理の方法ではなく、Ajax(XHR)を使わずにBlobをPOSTする方法が知りたいということでしょうか?
    – unarist
    Commented 2016年1月12日 6:47
  • はい、クロップ処理後のBlobをAjaxではなく通常のPOSTリクエストで送りたいのです。
    – kntmrkm
    Commented 2016年1月13日 0:06
  • であれば、タイトルの「フロントエンドで画像のクロップをして~」や本文の「クライアントサイドクロップ」といった表現は必要以上に条件を限定してしまい、却って混乱しそうなので(したので)それらの記述を削ってみました。もし質問意図が失われているようであればお手数ですがご指摘いただくか再度編集していただければと思います。
    – unarist
    Commented 2016年1月13日 5:20

1 件の回答 1

1

自己回答です。FormデータとしてPostする場合、やはりAjax以外はやり方がなさそうなので、
base64形式のデータで画像データを送り、バックエンド側での処理を変更しました。

https://github.com/timsly/carrierwave-data-uri

上記gemでは、formからダイレクトに送るにはコード記述が多くなりそうなのでPRを送ったのですが、OKもらえなかったので少し変更したforkのコードで対応しました。

https://github.com/timsly/carrierwave-data-uri/pull/6
https://github.com/kntmrkm/carrierwave-data-uri

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。