Laravelでバリデーションエラー時にアップロードした画像を表示する方法

Question

前提・実現したいこと

Laravelで入力項目が名前と画像の2つのみのフォームを作っています。
どちらも必須項目です。
名前は未入力で画像のみ選択して送信した場合、エラーとなり入力画面に戻りますが、その際にアップロードした画像を入力画面上に表示したいと考えております。

試したこと

素のPHPの場合は入力画面に戻る際に画像の情報を変数にセットして表示する処理を入れますが、Laravelの場合、バリデーション発生時にold('photo',$photo)のように初期値をセットしてやれば出来るのかなと思いましたが、それだと駄目でした。

Laravelでこういった処理を実現する事は可能なのでしょうか？
可能だとしたらどのように書けばいいかご教示いただけませんでしょうか。
Laravelのバージョンは5.7です。
よろしくお願いいたします。

Answer 1

laravelで、ファイルを含む送信フォームでバリデーションエラーがあった場合。。。
リダイレクトされて、入力画面に戻るので、アップロードした筈のファイルはいなくなっちゃいますよね。

これは、かなり困った事件です。
私も正しい解決方法はいまだ分からず・・・画期的な方法があるなら教えて欲しいくらい・・^^;

ということで、下記は私がよくやる、妥協策です。

---

■　jsで読み込んで文字列に

※　アップロードファイルが大きくない（制限をかける）＆　画像限定　ならば有かな、という方法です。

jsでアップロードしたファイルを読み込んで、画像データを文字列として　input type="hidden"に入れて送信します。

受取側では送信された実際のfileは無視しちゃいます。
input="hidden"に値をいれて送信するので、通常のinput=textと同じように、バリデーションエラーで戻った場合にもoldで値が取得できます。

この方法だと、選択したファイルを即時に見られるようにもできるので、対ユーザーのUI的にもいいかなと思ってもみたり・・・

---

■　事前にバリデーションチェック

バリデーション結果だけを返却するAPIを用意するか、
ajaxでのアクセス時にはバリデーション結果だけを返却できるように、POST先の処理を変更します。

画面遷移を行うform送信では、バリデーションエラーにはならないように、
formをsubmit前に、上記へ一度ajaxでformを送信してチェックを行います。

戻ってきた結果に問題が無ければ、実際にformをsubmitし、もしエラーがあれば、帰ってきた結果をエラーとして画面内に表示します。

ajax通信かつエラーの場合、laravelがjsonでうまいことエラーメッセージを返してくれるのでけっこう使いやすいです。

---

あと、下記は、上の2つに比べると手間がかかるので私はあまりやらないのですが。

■バリデーション処理前に、ファイルがあればアップロードの処理を行う

FormRequestを使っているなら、そちらで、
Contoller側で自前でバリデーションをかけているなら、バリデーション処理前に。

エラーで戻ってもファイルが確保できるように、アップロードのファイルがあれば一時フォルダなりにファイルをstoreする処理まで行ってから、バリデーション処理を通します。

エラーで戻る場合に渡されるデータに、移動させたアップロードファイル名が含まれるようにするのを忘れないよう、ご注意ください。。。

Comments

[miguchi73]

色々な代替案ありがとうございます。
私も先にアップロードするのとかは想定してましたが、画像をhiddenに入れるやり方とかは知らなかったので勉強になりました。
とりあえず普通に画像表示するのは無理そうですね。。
セッションに突っ込んでみたり、ミドルウェア使ってみたり色々試してみましたが結局すべてダメでした。

Answer 2

https://readouble.com/laravel/5.7/ja/requests.html

のリファレンス、「アップロードファイルの取得」が参考になりますよ。

Comments

[miguchi73]

ご回答ありがとうございます。
アップロードファイルを取得して画面に表示するために公開領域に移動するところとかはできているのですが、バリデーションでエラーになって入力画面に戻ったときにその画像を表示する方法がわかりません。

[退会済みユーザー]

そもそも、input type~"file" には初期値を設定することができません。セキュリティの問題でこのAPI自体が存在していません。

[miguchi73]

すみません。なんか実装の仕方が私の場合独特な気がしてきました。(^^;
input type="file" に値を戻すのではなくて、私の場合、バリデーションエラーになったとしても画像のアップロードが成功している場合は画像は入力画面に表示してやるという仕様にしています。
なのでたとえばinput type="file" name="photo"でアップロードして成功したらのすぐ上あたりにimgタグで成功した画像を表示するというようにしているのですが、laravelだとバリデーションエラーになると変数に画像ファイルのパスをセットしてimgタグに渡してやってもうまくいかないので、どうしたらいいかわからなくなってます。