title: laravel: image not being submitted with form
body: <p>I have this form in a page:</p>
  
  <pre><code>&lt;div class="card-block"&gt;
  {!! Form::open(array( 'autocomplete' =&gt; 'off', 'id' =&gt; 'AddModel', 'url' =&gt; 'model/useradd', 'files' =&gt; true)) !!}
  &lt;div class="form-group"&gt;
      &lt;label for="picture"&gt;Picture&lt;/label&gt;
      @if( (new Jenssegers\Agent\Agent)-&gt;isMobile() )
      {!! Form::file('image', ['id' =&gt; 'modelpic', 'accept' =&gt; 'image/*', 'capture' =&gt; 'camera'])  !!}
      @else
      {!! Form::file('image', ['id' =&gt; 'modelpic']) !!}
      @endif
      &lt;br/&gt;
  &lt;/div&gt;
  &lt;div id="imagePreview" style="display: none;"&gt;&lt;/div&gt; /** here I show preview of the image through JS */
  &lt;div class="form-group"&gt;
      {!! Form::submit('Submit', array('id' =&gt; 'AddBtn', 'class' =&gt; 'btn btn-default' )) !!}
      {!! Form::close() !!}
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>in my controller:</p>
  
  <pre><code>public function preview(Request $request)
  {
  dd($request-&gt;file('image'));
  }
  </code></pre>
  
  <p>result of dumping = <code>NULL</code> </p>
  
  <p>I don't understand what's the catch here. I have an identical form in another page that is working normally.</p>
  
  <p>by validating request I get the error "image is required" </p>
  
  <pre><code>$this-&gt;validate($request, [
  
  'image' =&gt; 'required|mimes:jpeg,jpg,png,gif|image|image_size:&gt;=640'
  ]);
  </code></pre>
  
  <p>new info:</p>
  
  <p>There must be a problem with the javascript because removing it the controller works normally:</p>
  
  <p>this is the JS</p>
  
  <pre><code>jQuery(function ($) {
      $(document).ready(function () {
  
          $("body").on("submit", "#AddModel", function (e) {
  
              var form = $(this);
  
              $.ajax({
                  url: form.prop('action'),
                  type: 'post',
                  dataType: 'json',
                  data: $(this).serialize(),
                  success: function (data) {
  
                  console.log(data);
  
  
                  },
                  error: function (textStatus) {
  
                      {
  
  
                          var json = JSON.parse(textStatus.responseText);
  
  
                          console.log (json);
  
  
                      }
  
                  }
              });
              e.preventDefault();
          });
      });
  });
  </code></pre>
  
  <p>solved, thanks @sagar</p>
  
  <pre><code>jQuery(function ($) {
      $(document).ready(function () {
  
          $("body").on("submit", "#AddModel", function (e) {
  
              var form = $(this);
  
              var postData = new FormData($("#AddModel")[0]);
  
              $.ajax({
                  type:'POST',
                  url:form.prop('action'),
                  processData: false,
                  contentType: false,
                  data : postData,
                  success:function(data){
  
                      console.log(data);
  
                  },
  
                  error: function (textStatus) {
  
                      {
  
  
                          var json = JSON.parse(textStatus.responseText);
  
  
                          console.log (json);
  
  
                      }
  
                  }
              });
              e.preventDefault();
          });
      });
  });
  </code></pre>