laravelでajaxでアップロードしたファイルのrequiredバリデーションを実行したい

Question

前提・実現したいこと

larvelでajaxを使ってcsvファイルをアップロードして、データベースに挿入する機能を実装しています。
正しいcsvファイルをアップロードして、データベースにデータが挿入されることはできました。

バリデーションを行うためにrequiredとmimetypes:text/plainルールを使用しています。ファイル未選択の状態でフォームを送信するとmimetypsのバリデーションだけに引っかかり、requiredのバリデーションルールには引っかかりません。どうすればファイル未選時にrequiredに引っかかるようになるでしょうか。

該当のソースコード

CsvImportController.php

    public function import(Request $request) {
        $validator = Validator::make($request->all(), [
            'csv_file' => ['required', 'mimetypes:text/plain'],
        ]);
        
        /* ファイル未選択の状態でもrequiredに関するエラーは存在しない */
        if ($validator->fails())
            return response()->json([
                'success' => false,
                'flash_msg' => 'バリデーションに失敗しました。',
            　   'validation error messages' => $validator->errors()->all(),
            ], 400);
    /* 省略 */
}

upload-csv.js

$(function() {
  $('#upload_csv_btn').on('click', function() {

    // csrfをセット
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    // uploadするcsvファイル情報追加
    let fileData = document.getElementById('csv_file').files[0];
    let formData = new FormData();
    formData.append('csv_file', fileData);

    $.ajax({
      type: 'POST',
      url: $('#upload_csv_btn').data('upload-url'),
      data: formData,
      processData: false,
      contentType: false,
      success: function (data) {
        console.log('成功しました');
      },
      error: function (data) {
        console.log('失敗しました');
      },
    /* flash message表示処理は省略 */
    });
  });
});

index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                  <x-auth-validation-errors class="mb-4" :errors="$errors" />
                  <form action="{{ route('admin.records.csv.upload') }}" method="post" enctype="multipart/form-data">
                    <div class="-m-2">
                      <div class="p-2 w-1/2 mx-auto">
                        <div>
                          <label for="csv_file" class="leading-7 text-sm text-gray-600">csvファイル</label>
                          <input type="file" id="csv_file" name="csv_file" required accept=".csv" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-green-500 focus:bg-white focus:ring-2 focus:ring-green-200 text-base outline-none text-gray-700 py-1 px-3leading-8 transition-colors duration-200 ease-in-out">
                        </div>
                      </div>
                      <div class="p-2 w-full mt-4 flex justify-around">
                        <button type="button" onclick="location.href='{{ route('admin.records.index') }}'" class="bg-gray-200 border-0 py-2 px-8 hover:bg-gray-400 rounded text-lg">戻る</button>
                        <button type="button" id="upload_csv_btn" class="text-white bg-green-500 border-0 py-2 px-8 hover:bg-green-600 rounded text-lg" data-upload-url="{{ route('admin.records.csv.upload') }}">アップロード</button>
                      </div>
                    </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{{ mix('js/upload_csv.js') }}"></script>
    <script type="text/javascript" src="{{ mix('js/upload_button.js') }}"></script>
</x-app-layout>

補足情報（FW/ツールのバージョンなど）

laravel8

Answer 1

原因はJS側にあります。
ファイルがない場合、let fileData = document.getElementById('csv_file').files[0];の結果はundefinedになります。
そして、formData.append('csv_file', fileData);でundefinedをcsv_fileの値としているので、それでリクエストを行います。

そのため、requreidに引っかかっていないです。

Networkタブからリクエスト内容をチェックするとおそらくcsv_file: undefinedのようになっているかと思います。
Laravelにて、$request->csv_fileの値がどのようになっているか確認して進めていくとよいかと思います

Comments

[tarou2]

ありがとうございました。
`fileData`が`undefined`の時は`formData`に`appned`しないようにすると、ファイル未選択時に`required`に引っかかりました。`undefined`はファイルがあると判断されてしまうんですね。

[natsume2233]

> `undefined`はファイルがある
requiredで引っかかるのが

```
値がnullである。
値が空文字列である。
値が空の配列か、空のCountableオブジェクトである。
値がパスのないアップロード済みファイルである。
```

です。今回の場合、Laravelとしては`$request->csv_file`の中身は`undefined`という文字列が渡ってきているので`required`に引っかかっていないだけになります