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 upload) as seen below. The current code uploads files sequentially as the user can select more than one photo but not together & I use queuing algorithm with setTimeout in Javascript to check if the first upload finishes to start the second upload, third, and so on.

<form id="form1">
    <input type="file" id="userfile1" name="userfile[]" multiple/>
</form>

<form id="form2">
    <input type="file" id="userfile2" name="userfile[]" multiple/>
</form>
.
.
.

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:

document.getElementById('userfile1').files;

So now, how can I assign the second image selected to the second input file

userfile2

Because I want to resume the upload as before? It is not working with me and I read that there is security concerns to update the input file, but I need to assign what the user selected, not a path.

I don't want to use the FromData with AJAX as that will lead to change all my code and also it is not compatible with all browsers like my code.

Thanks a lot for your help!

guest271314 · Accepted Answer · 2019-02-16 23:10:23Z

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

edited Feb 16, 2019 at 23:10

answered Feb 28, 2016 at 0:10

guest271314

1

Sign up to request clarification or add additional context in comments.

9 Comments

guest271314 Over a year ago

@moderns A workaround would be to select the specific File object from the returned FileList , "clone" the file using FileReader, Blob, or XMLHttpRequest and perform a separate task using the selected file

moderns Over a year ago

Thanks a lot, but sorry I didn't get you well, would you please provide a code and I will submit your answer as correct one? Appreciate your help.

moderns Over a year ago

Thanks, so that will be done in JavaScript right? One more thing, any source link for a similar operation? I lost my eyes today trying and searching.

guest271314 Over a year ago

No it will not assign File objects to second input; that is not possible. It is possible to filter selected files and perform separate processes on those files, for example, upload using ajax

guest271314 Over a year ago

You could use Promise to perform second upload only when first upload is complete, or perform uploads asynchronously with a progress bar for each upload, see stackoverflow.com/questions/28856729/…

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related