title: Javascript handling multiple files upload
body: <p>I'm working on a project with the following steps:</p>
  
  <ol>
  <li>Creating the form with multiple images upload</li>
  <li>Previewing, remove images on queue before upload</li>
  <li>Handling the file input value before submit</li>
  </ol>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     var fileList = [];
  
  
              function toObject(arr) {
                  var rv = {};
                  for (var i = 0; i &lt; arr.length; ++i)
                      rv[i] = arr[i];
                  return rv;
              }
              //Image prev
              // Multiple images preview in browser
              var imagesPreview = function (input, imageContainer) {
  
                  if (input.files) {
                      var filesAmount = input.files.length;
                      $(imageContainer).html('');
                      for (i = 0; i &lt; filesAmount; i++) {
                          var reader = new FileReader();
  
                          reader.onload = function (event) {
                              var html = '&lt;div class="image-item col-sm-6 col-md-4 col-lg-3"&gt;&lt;div class="image-wrapper"&gt;' +
                                  ' &lt;img src="'
                                  + event.target.result + '"/&gt;&lt;/div&gt;&lt;/div&gt;';
                              $(html).appendTo(imageContainer);
  
                          }
                          var files = input.files;
                          fileList.push(files[i]);
                          reader.readAsDataURL(input.files[i]);
                      }
                      input.files = toObject(fileList);
                  }
  
              };
  
              $('#input-image').on('change', function () {
                  imagesPreview(this, '.image-container');
              });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                 &lt;div class="image-item"&gt;
                   
                   &lt;!-- input the image from user --&gt;
                   &lt;input id="input-image" type="file" name="photos[]" multiple&gt;
                      &lt;hr&gt;
                      &lt;div class="image-container row"&gt;
                      &lt;!-- Previewing the image thumbnail --&gt;
                      &lt;/div&gt;
                      
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My questions: Can I set the value of the <code>input-image</code> with <code>fileList</code> variable because I set it but error occurs</p>