title: uploading an image immediately after selection using ajax without onclick event
body: <p>I am trying to upload an image in laravel using ajax as bellow</p>
  <pre><code>    $(document).ready(function () {
          bsCustomFileInput.init();
          $('#exampleInputFile').on('change', function(){
              var file = this.files[0];
              var fileType = file[&quot;type&quot;];
              var validImageTypes = [&quot;image/gif&quot;, &quot;image/jpeg&quot;, &quot;image/png&quot;];
              if ($.inArray(fileType, validImageTypes) &lt; 0) {
                  // invalid file type code goes here.
                  alert('Please select a valid image in the following formats .gif, .jpeg, .png');
              }else{
                  //get the image and place it in a variable
                  $.ajaxSetup({
                      headers: {
                          '_token' : $('input[name=_token]').val()
                      }
                  });
                  var formData = new FormData(document.getElementById(&quot;#upload-image-form&quot;));
                  alert(&quot;Created FormData, &quot; + [...formData.keys()].length + &quot; keys in data&quot;);
                  $('#image-input-error').text('');
                  $.ajax({
                      type:'POST',
                      url: `/property/images/add`,
                      data: formData,
                      contentType: false,
                      processData: false,
                      success: function(response) {
                          if (response) {
                          $('#exampleInputFile').reset();
                          $('#images').append(&quot;&lt;img class='img-responsive' src='uploads/property/small/&quot;+
                          response.path +&quot;'/&gt;&quot;);
                          alert('Image has been uploaded successfully');
                          }
                      },
                      error: function(response){
                          console.log(response);
                              $('#image-input-error').text(response.responseJSON.errors);
                      }
                  });
              }
          });
      });
  </code></pre>
  <p>My problem is that after selection I get the following error</p>
  <pre><code>    Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
  at HTMLInputElement.&lt;anonymous&gt; (add:234)
  at HTMLInputElement.dispatch (jquery.min.js:2)
  at HTMLInputElement.v.handle (jquery.min.js:2)
  </code></pre>
  <p>The line throwing the error is the one that instantiates the FormData. What could I be doing wrong or rather how can I get the image uploaded without click event?</p>