Ошибки при получении загруженного файла и формы данных из формы с использованием AJAX и публикации в бэкэнд Laravel

Question

Я работаю над формой, которая имеет различные поля ввода , включая поле для загрузки файлов .Когда пользователь нажимает кнопку отправки, я хочу отправить форму с помощью AJAX POST-запроса к бэкэнду, который является PHP Laravel .Проблема в том, что данные не передаются должным образом. Я сериализирую данные, а затем публикую их напрямую, но не уверен, что это правильный путь.

Макет формы

<form method="POST" action="#" id="form" enctype="multipart/form-data" accept-charset="UTF-8">
    <!-- CSRF TOKEN-->
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- END CSRF TOKEN-->
    <div class="form-line registar2 love">
        <input id="passport" type="text-area" class="form-input" name="passport" value="{{ old('passport') }}" autofocus>
            <label> Passport</label>
            <div class="error-label"></div>
            <div class="check-label"></div>
             @if ($errors->has('passport'))
                <span class="help-block">
                    <strong>{{ $errors->first('passport') }}</strong>
                </span>
            @endif
   </div>

    <div class="form-line registar2 move" >
      <input id="kra" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" required>
      <label>KRA Pin *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 love {{ $errors->has('residence') ? ' has-error' : '' }}">
      <input id="residence" type="text-area" name="residence" class="form-input" required>
      <label>Current Residential Address *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('residence'))
        <span class="help-block">
            <strong>{{ $errors->first('residence') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 move {{ $errors->has('documents') ? ' has-error' : '' }}">
      <input id="documents" type="file" class="form-input" name="documents" value="{{ old('documents') }}" multiple>
      <div class="error-label"></div>
      <div class="check-label"></div>
      @if ($errors->has('documents'))
          <span class="help-block">
            <strong>{{ $errors->first('documents') }}</strong>
          </span>
      @endif
    </div>

    <button type="submit"id="pay"> Proceed to Payament</button>


  </form>

Код AJAX, вызываемый при отправке формы

<script>
    // Get the form via its id
    var form = $('#form');

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    var inputs = $("#form :input");
    console.log(inputs);

    var entries = inputs.serialize();

    console.log(entries);

    $.ajax({
        type: "POST",
        //url in the routes file to post the data
        url: "saveAdd",
        contentType: "application/x-www-form-urlencoded",
        data: entries,
        success: function(response){
          alert(response);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

</script>

Направляет файл контроллера в POST на

Route::any( '/saveAdd', 'B2CController@saveAdd')->name('b2c.saveAdd');

Файл контроллера в Laravel Backend

    public function saveAdd(Request $request){

        dd($request->all());
    }

Answer 1

В функции отправки формы она получает все данные из формы, включая файл.Ключевое слово let используется в качестве локальной области видимости.

$( "form" ).submit(function( event ) {
    let form = $( this )
    let formData = new FormData(form[0]);
    event.preventDefault();
    console.log(formData);

    $.ajax({
        type: "POST",
        data:formData,
        processData: false,
        contentType: false,
        url: "saveAdd",
        success: function(response){
            alert(response);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});