1

I'm having trouble uploading multiple images because the array of the files get's overwritten when I only select one image at a time.

Here is the HTML I'm using:

<input type="file" id='files' name="files[]" multiple/>

I'm using Javascript to display the selected Images and I'm giving the user the option to remove them if they must.

Now let's say you select one image to upload, and select one after that as well, the Javascript will display two images. But when I use this:

$("#files")[0].files

It only displays one file, because the entire array was overwritten as the user selected two images not at once, but separately. So how can I make the user select two images separately and still get the entire list?

Mihael Keehl
  • 335
  • 5
  • 16

2 Answers2

1

You have to manage that in memory separately. One field is not going to store previous values that were stored. Just like a text input field is not going to remember a previous value once you type a new value in it. See Reading client side text file using Javascript (You'll have to adapt it to binary data. See https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer and Convert blob to base64)

Alternatively, after the user selects a file, create a new file input dynamically.

Community
  • 1
  • 1
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • Thank you for the fast reply Juan! Creating a new file input is an idea but it will look a little ugly with all due respect. Is there a way to take that file-data, and then store it in a different variable/list temporarily? – Mihael Keehl Feb 23 '17 at 16:18
  • I tried that and it displayed the file in its entirety in the console, but the data has to be sent using an Ajax call using that data. So it will get the list using $("#files")[0].files and iterate over it or something like that so I can send every file using XHR. Is binary data the only way? – Mihael Keehl Feb 23 '17 at 16:25
  • 1
    You can convert the binary data into base 64 encoded using http://stackoverflow.com/questions/18650168/convert-blob-to-base64 – Ruan Mendes Feb 23 '17 at 16:30
  • Oh sweet that'll work! Thank you a million times Juan!!! I was struggling with this for hours!! – Mihael Keehl Feb 23 '17 at 16:36
1

Can you utilize the push method to append each image to the array and then pop them as needed? Basically, iterate over the array. If they select two files, it will do a push, push and done.

If they upload one image at a time, same thing will happen just more slowly.

boymeetscode
  • 805
  • 1
  • 9
  • 26
  • Thank you for answering. Yes maybe, is there a way to take all that data and store it somewhere in an array? Because it will be sent to Ajax in the end to add it to a post request. – Mihael Keehl Feb 23 '17 at 16:20
  • Without seeing what you are trying to do with the images it is hard to tell you *how*. But I'd think you could use a simple for loop. Something like: var myArray = new Array() for image in files: myArray.push(image) This is of course psuedo-code, you'll have to adapt to javascript. I've also never done this with files. But if you upload multiple files they are already in an array object called files[]. – boymeetscode Feb 23 '17 at 18:26