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

1 Answers1

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.

guest271314
  • 1
  • 15
  • 104
  • 177
  • 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++) ...` –  Aug 13 '17 at 15:06
  • @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 https://stackoverflow.com/questions/38580177/how-to-work-with-filelist-from-input-type-file-in-javascript/38580250#38580250, https://stackoverflow.com/questions/40206693/create-formdata-instance-for-each-file-in-input-type-file-multiple/40206757#40206757 – guest271314 Aug 13 '17 at 15:07
  • @devnull Note, that the procedure will not remove the original `File` from the `.files` property of the `` element – guest271314 Aug 13 '17 at 15:15
  • 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? –  Aug 13 '17 at 15:49
  • 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 `` element, not the `.files` property of an `` element. Have you read the linked questions and answers? – guest271314 Aug 13 '17 at 16:00
  • You can assign an existing `FileList` object to a different `.files` property. Though you cannot remove an individual `File` object from a `FileList` object. – guest271314 Aug 13 '17 at 16:17
  • sorry, I missed that link –  Aug 13 '17 at 17:52