title: Append Files in Input Type File with Multiple Before Uploading
body: <p>I have a form on my laravel website with a section that allows users to upload multiple image files (with a preview of the selected images). If a user only chooses multiple images once, everything works, and the selected images get uploaded. However, if a user selects multiple images on two separate occasions before submitting the form, only the last bunch of selected images will be uploaded.</p>
  
  <p>For example; a user selects 4 images, then they fill out some other fields on the form, and then they decide to add 3 more images on top of the 4 images they previously selected before submitting the form. The image preview box will contain all 7 images they have selected, but once they submit the form, only the last 3 images they selected will be uploaded.</p>
  
  <p>HTML Multiple File Input:</p>
  
  <pre><code>&lt;input id="gphotos" type="file" name="gphotos[]" multiple&gt;
  &lt;div class="preview"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function gphoto(input, ImagePreview) {
      if (input.files) {
          var fileAmount = input.files.length;
  
          for (i = 0; i &lt; fileAmount; i++) {
              var reader = new FileReader();
  
              reader.onload = function(e) {
                  $('.preview').css('margin-top', '4px');
                  $($.parseHTML('&lt;img class="gphoto"&gt;')).attr('src', e.target.result).appendTo(ImagePreview);
              }
  
              reader.readAsDataURL(input.files[i]);
          }
      }
  };
  
  $('#gphotos').change(function() {
      gphoto(this, 'div.preview');
  });
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>if (request('gphotos')) {
          $imageArray['gphotos'] = array();
  
          foreach (request()-&gt;gphotos as $gphoto) {
              $gphotoPath = $gphoto-&gt;store('gphotos', 'public');
  
              $imageArray['gphotos'][] =  $gphotoPath;
          }
  
          $imageArray['gphotos'] = json_encode($imageArray['gphotos']);
      }
  </code></pre>
  
  <p>I would like users to be able to select multiple images on multiple separate occasions before submitting the form, and all their images being uploaded. I have tried searching all over the internet, but no one has a simple solution to this seemingly simple problem. I would greatly appreciate it if someone could help me solve this issue.</p>