Last active
October 18, 2022 09:49
-
-
Save guest271314/7eac2c21911f5e40f48933ac78e518bd to your computer and use it in GitHub Desktop.
Set the FileList of <input type="file"> to arbitrary File objects
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- guest271314 11-12-2017 --> | |
| <!-- see https://stackoverflow.com/questions/47119426 --> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <script> | |
| const input = document.createElement("input"); | |
| const label = document.createElement("label"); | |
| const text = document.createTextNode("click to set files\n"); | |
| const form = document.createElement("form"); | |
| const data = [ | |
| new File(["a"], "a.txt"), new File(["b"], "b.txt") | |
| ]; | |
| // https://github.com/w3c/clipboard-apis/issues/33 | |
| class _DataTransfer { | |
| constructor() { | |
| return new ClipboardEvent("").clipboardData || new DataTransfer(); | |
| } | |
| } | |
| input.type = "file"; | |
| input.name = "files[]"; | |
| input.multiple = true; | |
| input.id = "files"; | |
| text.textContent = text.textContent.concat(data.map(({ | |
| name | |
| }) => name).join(", "), "\n"); | |
| label.appendChild(text); | |
| form.appendChild(label); | |
| form.appendChild(input); | |
| document.body.appendChild(form); | |
| // https://github.com/whatwg/html/issues/3222 | |
| // https://bugzilla.mozilla.org/show_bug.cgi?id=1416488 | |
| label.onclick = e => { | |
| const dt = new _DataTransfer(); | |
| for (let file of data) { | |
| dt.items.add(file) | |
| } | |
| if (dt.files.length) { | |
| input.files = dt.files; // set `FileList` of `dt.files`: `DataTransfer.files` to `input.files` | |
| } | |
| for (const file of input.files) { | |
| console.log(file); // `File` objects originally set at `data`, set at `input.files` | |
| } | |
| const fd = new FormData(form); // pass `form` to `fd`: `FormData` | |
| for (const [key, prop] of fd) { | |
| console.log(key, prop); // `File` objects set at `fd` | |
| } | |
| } | |
| // not dispatched at Firefox 57 when set using `input.files = dt.files` | |
| input.onchange = e => { | |
| console.log(e, input.files); | |
| } | |
| </script> | |
| </body> | |
| </html> |
@Kaiido ClipboardEvent was used for Firefox, DataTransfer was used for Chromium, to achieve same result at each browser. Did not read the ClipboardEvent specification before trying different approaches.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Your discovery lead to this proposal: whatwg/html#3269 (comment)
I will also edit the StackOverflow answer giving you credits, you will probably be able to self-answer after your account ban turns-off.