CODEWITHSUNDEEP
javascripthtml
user7328234
user7328234

Reputation: 413

Only one file is uploaded when choosing multiple files in input type

User click the uploader several times to upload multiple files(for example, a.txt, b.txt, c.txt), but server can only receive the last file(c.txt). Is there anything else needed to implement multiple files uploader?

<form action="storeArticle" method="post" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple >
    <input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>

==========
What I want to implement is like https://stackoverflow.com/questions/ask. User can click the image icon as many times as they want, and finally all the images will be sent to server conrrectly.

Upvotes: 0

Views: 2242

Answers (2)

Russell
Russell

Reputation: 496

I was going to add this as a comment, but I can't.

Have you tried cloning the input and adding it to the form?

Then when the user selects a file you would could either add the new input, add the new input and hide the "populated" ones, or add the new input and mark the "populated" ones as readonly (you would want to add some method to remove them).

Upvotes: 0

SidTheBeard
SidTheBeard

Reputation: 379

When you say they click the uploader several times, do you mean having to open the file explorer each time to add one file? If so, then this will cause it to lose the other files that were previously selected.

The way to fix this is for your users to ctrl/cmd+click each file they want while only opening the file explorer once.

File inputs even remove the selected file when you open a file explorer and then press cancel.

EDIT

Just a thought, I'm on a phone so I can't test this but maybe you can play around with it...

have an input field that will be there from start to finish. When they select their first file, make the button (best to use a <label>) they click no longer open that file input. Instead, append a dynamic file input and make the label's for attribute equal to the dynamically added file input. After you add the dynamic input, create a listener for it so when the user selects a file in that new input it is appended to the original input.files array. Once this happens the process starts all over again, the dynamic input handles the file selection and passes it to the original input when a file is selected.

The reason it is best to hide the actual choose file button is because it can be a bit inconsistent at times. Instead, using the label element with the input element's id as the label's for attribute guarantees that clicking the label will focus the file upload field.

Upvotes: 1

Related Questions