[入力エラー] ファイルアップロードで入力エラー時にファイル参照欄を赤線で囲う対応の見直し

[akagane99]

概要

ファイルアップロードで入力エラー時にファイル参照欄を赤線で囲おうとしていましたが、赤線が表示されていない画面がありましたので対応しました。

詳細

エラー時 <input type="file"> に border-danger クラスを追加しても赤線枠が表示されない
↓
エラー時 <label class="custom-file-label"> に border-danger クラスを追加すると赤線枠が表示される

<input type="file" name="upload_file[{{$frame_id}}]" value="{{old("upload_file.$frame_id")}}" class="custom-file-input @if ($errors && $errors->has("upload_file.$frame_id")) border-danger @endif" id="upload_file{{$frame_id}}">
<label class="custom-file-label" for="upload_file" data-browse="参照">ファイル選択...</label>
↓
<input type="file" name="upload_file[{{$frame_id}}]" value="{{old("upload_file.$frame_id")}}" class="custom-file-input" id="upload_file{{$frame_id}}">
<label class="custom-file-label @if ($errors && $errors->has("upload_file.$frame_id")) border-danger @endif" for="upload_file" data-browse="参照">ファイル選択...</label>

※ <input type="file">、<label class="custom-file-label"> 両方に border-danger クラスを追加している画面もありましたので、<label class="custom-file-label"> にだけ追加するよう見直しました。

修正後画面

（参考）修正前画面

レビュー完了希望日

なし

関連Pull requests/Issues

なし

参考

なし

DB変更の有無

なし

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule