0

I have form with multiple file inputs

<input type="file" name="images[]" multiple>
<input type="file" name="images[]" multiple>
<input type="file" name="images[]" multiple>
.....

user can upload multiple files from one input. form submits on input change(when user select files and click upload). is there way to get one specific file from this input and assign it to another one? lets say user select 3 files in first input. what i want to do is to 'take' 2 files(so in first input only one file left) and assign them to another 2 inputs. so in the end, each input has only one file. how can i do that? I tried to get value from input $('#myInput').val() but it returns only last file. also tried var files = document.getElementById("myInput").files but it doesn't help, I cannot 'take' files and assign them to another inputs

Improve this question

1 Answer 1

Reset to default
0

It is possible to assign an existing FileList object, retrieved for example from an <input type="file"> .files or a DataTransfer.files object to a different <input type="file"> .files property. It is not possible to remove a File object from a FileList object referenced by .files property.

What you can do is iterate the FileList and assign the File objects to a FormData object or an array. Else the .files property is read-only.

See also input file to array javascript/jquery.

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

7 Comments

thanks for reply. can you please be more specific, how should i do that? as i guess var files = document.getElementById("myInput").files; and then loop through for (var i = 0; i < files.length; i++) ...
@devnull Yes. You can create an FormData object or an Array to store the specific File objects that you want to get from the original FileList object. You should not have an issue uploading the FormData object to server which includes the N File objects set at value of the respective keys of the FormData object, see stackoverflow.com/questions/38580177/…, stackoverflow.com/questions/40206693/…
@devnull Note, that the procedure will not remove the original File from the .files property of the <input type="file"> element
ok, having some troubles. i loop through for (var i = 0, files = event.target.files; i < files.length; i++) { $('.otherInput').val(files[i]); } something like this?
No, not like that. The Answer explains that it is not possible to set a File at a FileList object other than at a drop event using DataTransfer.files. Use FormData as described at answers at linked questions. .val() sets the .value property of an <input> element, not the .files property of an <input type="file"> element. Have you read the linked questions and answers?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.