I am trying to submit a html form containing file input type with JQuery in Laravel

I am using laravel, so I am trying to submit an HTML form containing file input type using JQuery. when I submit the form only itemName gets submitted, productImage1 is ignored.

if I change file type for productImage1 to text, then it gets submitted too. please assist.

Html code below.

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

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

                <label for="productImage1"></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=""  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 code below.

if I use new form data instead of $(this).serialize I get a token mismatch error.

$('#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");
                 }
            })
        })

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2RrZN9E
via IFTTT