0

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!

moderns
  • 650
  • 10
  • 23

1 Answers1

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

guest271314
  • 1
  • 15
  • 104
  • 177
  • 1
    @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 – guest271314 Feb 28 '16 at 00:14
  • 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 Feb 28 '16 at 00:16
  • 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. – moderns Feb 28 '16 at 00:20
  • Thank you very much, I am reading now, but have question, the code above, shall I place it inside the onchange event of the first input file? – moderns Feb 28 '16 at 00:36
  • And will it assign the multiple images selected (files) to their corresponding input files? So it will be same as if each file opened dialog? – moderns Feb 28 '16 at 00:37
  • 1
    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 Feb 28 '16 at 00:39
  • I see, but I have progress bar from PHP session progress, so that would be hard now to get it working again using this way, right? – moderns Feb 28 '16 at 00:42
  • 1
    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 http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ – guest271314 Feb 28 '16 at 00:45
  • Thanks, I will dig as still can't get the full image, actually I don't use the JQuery and I write my own libraries as I love that. I am doing now by submitting the form inside iframe using the JavaScript, so when the iframe loaded, the upload is complete. I should find solution soon. If you have extra hints, I would appreciate :) – moderns Feb 28 '16 at 00:52