Я пытаюсь отправить html форму, содержащую тип ввода файла с JQuery в Laravel

Question

Я использую laravel, поэтому я пытаюсь отправить форму HTML, содержащую тип ввода файла, используя JQuery. когда я отправляю форму, отправляется только itemName, productImage1 игнорируется.

если я изменяю тип файла для productImage1 на текстовый, то он также отправляется. , пожалуйста, помогите.

Html код ниже.

            {{ csrf_field() }}
            <div class="form-group" id="addItemImage">
                 <div class="form-group">
                    <label>{{ __('Product name') }}</label>
                    <input type="text" class="form-control @error('itemName') is-invalid @enderror" id="itemName" name="itemName" placeholder="Product Name" value="{{ old('itemName') }}"  autocomplete="itemName">
                  </div>

                  @error('itemName')
                    <p class="alert alert-danger" style="opacity: 60%;" role="alert">
                        <strong>{{ $message }}</strong>
                    </p>
                  @enderror

                <label for="productImage1">{{ __('Product image 1') }}</label>
                <div class="input-group d-flex justify-content-between align-items-baseline">
                  <div class="custom-file">
                    <input type="file"
                           class="custom-file-input @error('productImage1') is-invalid @enderror"
                           id="productImage1" name="productImage" placeholder="Product Name"
                           value="{{ old('productImage1') }}"  autocomplete="productImage1"/>
                    <label class="custom-file-label" for="productImage1">Choose file</label>
                  </div>

                  <div class="col-md-1"></div>
                  <div class="image-preview" id="imagePreview">
                      <img class="image-preview__image" src="" alt="image preview">
                      <span class="image-preview__default-text">
                        image preview
                      </span>
                  </div>
                </div>
              </div>

             <p id="results"></p>
              <!--/.col (right) -->
             <div class="card-footer">
                <button type="submit" class="btn btn-primary" id="addItemButton" name="addItemButton">Add product</button>
           </div>
         </div>
       </form> 

JQuery код ниже.

если я использовать новые данные формы вместо $(this).serialize Я получаю ошибку несоответствия токена.

$('#addItemForm').on('submit',function(event){
            event.preventDefault();
            var formdata = new FormData($('form').get(0));

            $.ajax({
                url: 'addItem',
                method: 'post',
                data: $(this).serialize,
                dataType: 'json',
                cache: false,
                beforeSend:function(){
                     $('#addItemButton').prop("disabled", true);

                 },
                 success:function(data){
                    if(data.error){
                        var err_html = '';
                        for(var count = 0; count < data.error.length; count++){
                            err_html += '<p>'+data.error[count]+'</p>';
                        }
                        $('#results').html('<div class="alert alert-danger">'+err_html+'</div>');
                    }
                    else{
                        $('#results').html('<div class="alert alert-success">'+data.success+'</div>');
                    }

                    $('#addItemButton').removeAttr("disabled");
                 }
            })
        })