-
-
Save IgorSasovets/760b382f2f5b28722cc94aa3ce801e28 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment