2

I'm trying to create an AJAX Multi-Upload which will get all selected files within a form/file-input and upload this through my AJAX PHP Controller. For this process I'm using jQuery (1.11.3) and the jQuery-Form plugin.

Everything works properly except a really annoying issue; When a user selects a couple of files with the file input and then proceeds to select another couple of files, the previous selected files are removed from the "files[]" Array. Following is my HTML5 file input:

<input id="multi-upload" type="file" name="files[]" multiple>

My question is basically wether it is possible to just append the newly selected files, instead of overwriting the old "files[]".

I've tried to solve this situation by creating an Array in my JavaScript, which will push the new files in the array on change of the file input, but this will just result into receiving a 'blob' error as sending files directly through AJAX doesn't really work too well, unfortunatly.

So the only option that I know of that could work is by sending the form data and grabbing the $_FILES parameter withing my Controller and this brings me back to the problem described above.

I guess a way would be to immediatly upload the files on change of the file input, but as people should be able to edit names of their files and be able to cancel the file from being uploaded, this is far from ideal.

So my question is; Is it possible to let new files be appended to the file input instead of the file input being completely overwritten, or is there an alternative method to reach this kind of goal?

I'm sorry if there is a similar question hidden somewhere, but I haven't been able to find any answer myself that has been properly answered.

Improve this question
2
  • 1
    You could simply just hide the file input when a file has been chosen and then create a new input. Commented Jun 19, 2015 at 10:27
  • Wow, I feel stupid now for not thinking of doing that... Gonna try it out and give an update. Commented Jun 19, 2015 at 10:32

1 Answer 1

Reset to default
4

As i mentioned in my comment you could just create a new input every time a user selects a file...

Jquery example:

$(document).on('change','input[type="file"][multiple]',function(){ var $this = $(this); $this.clone().insertAfter($this); $this.hide(); });

You don't have to use jQuery of course, but its just the simplest way to explain what i mean.

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

1 Comment

Very helpful, even in 2018 :-) Shame the w3 people can't make the file input append, or at least have the durn option built in.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.