title: Unable to pass attached files to controller: 422 Unprocessable Entity
body: <p>I'm using Dropzone js to handle multiple file uploads. However, the files aren't passed to the controller. After resolving 419 post error by adding the header code for the CSRF token, 422 unprocessable entity error appeared. </p>
  
  <p>Based on the response at network log, it seems to affect the validation in my other fields which were working fine earlier.</p>
  
  <pre><code>{"message":"The given data was invalid.","errors":{"item-name.0":["The item-
  name.0 field is required."],"item-quantity.0":["Please Enter Item 
  Quantity."],"availableStartDate":["The available start date field is 
  required."],"availableEndDate":["The available end date field is 
  required."],"preferredTime":["The preferred time field is required."]}}
  </code></pre>
  
  <p>Here are the Javascript codes at the top of the Blade file.</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
      Dropzone.autoDiscover = false;
      $(document).ready(function () {
          new Dropzone('#fileInput', {
              autoProcessQueue: false,
              uploadMultiple: true,
              parallelUploads: 1000,
              maxFiles: 100,
              acceptedFiles: ".jpeg,.jpg,.png,.gif",
              url: '/make-a-donation',
              addRemoveLinks:true,
              headers: {
                  'X-CSRFToken': $('meta[name="token"]').attr('content')
              },
  
              init: function () {
  
                  var myDropzone = this;
                  var wrapperThis = this;
                  $("#submit-all").click(function (e) {
                      e.preventDefault();
                      myDropzone.processQueue();
                  });
  
                  //Removed sending and success functions respectively
  
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here are the HTML codes:</p>
  
  <pre><code>&lt;form class="form-horizontal myForm" method="POST" files="true" action="{{ 
  route('postdonation') }}"  enctype="multipart/form-data"&gt;
  {{ csrf_field() }}
  
   &lt;div class="col-md-12"&gt;
  
               &lt;div id="fileInput" class="dropzone"&gt;
               &lt;div class="fallback"&gt;
               &lt;!--replaced files[] to file--&gt;
               &lt;input name="file" type="file" multiple="multiple" id="fileUpload"/&gt;
               &lt;/div&gt;
               &lt;/div&gt;
  &lt;/div&gt;
  
  ....
  
  &lt;div class="form-group"&gt;
       &lt;div class="col-md-6 col-md-offset-4"&gt;
             &lt;button type="submit" id="submit-all" class="btn btn-primary"&gt;
                 insert
              &lt;/button&gt;
        &lt;/div&gt;
   &lt;/div&gt;
   ...
   &lt;/form&gt;
  </code></pre>
  
  <p>At the controller, </p>
  
  <pre><code>   public function store(CreateDonationDetailsRequest $r) {
  
     //Inserting other data in the form
     .....
  
    //Previously $r-&gt;file('files') as $file to
      foreach ($r-&gt;file('file') as $file) {
          $donationImages = new DonationImages();
  
          // Set the destination path
          $destination = '/donationImagesUpload/';
          // Get the orginal filname or create the filename of your choice
          $filename = $file-&gt;getClientOriginalName();
  
          // Copy the file to the destination folder
          $file-&gt;move(public_path($destination), $filename);
  
          //Insert file name to database
          $donationImages-&gt;donation_items_id = $donationItems-&gt;id;
          $donationImages-&gt;photoName = $filename;
  
          //Save images to database
          $donationItems-&gt;donationImages()-&gt;save($donationImages);
  
      }
  
      ..
  }
  </code></pre>