Assign multiple images (files) from one file input to another file input(s) - upload

Question

I have successful upload code that works perfect using the AJAX when I select each file to upload from the dialog. So each upload has its own form and input file (button to

Answer 1

It is not possible to assign a File object to an input type="file" element using javascript . See How to set File objects and length property at FileList object where the files are also reflected at FormData object?. File object should be selected by user. It is possible to select a single or mutiple File objects from a FileList returned from multiple File selection and send that selected file to server as a separate process

document.querySelector("input[name=files]")
  .addEventListener("change", function(event) {
    var files = Array.prototype.slice.call(event.target.files),
      filtered = [];
    for (var i = 0; i < files.length; i++) {
      if (i > 0) filtered.push(files[i])
    };
    if (filtered.length) {
      console.log(files, filtered);
      filtered.forEach(function(file) {
        // do stuff
      })
    }
  })

<input name="files" type="file" accept="image/*" multiple="true" />

---

The problem now, when I select multiple images to upload (let's say two images together using Ctrl), using the first input file, I get them in this array

Note, the FileList object returned by multiple files being selected is not an Array .

See also input file to array javascript/jquery , Trigger click on input=file on asynchronous ajax done() , Simulate drop file event