ampproject / ampproject/worker-dom
Implement .files for input[type=file]
- Dominant language
- TypeScript
- Stars
- 3.3k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
## Describe the new feature or change to an existing feature you'd like to see
i have an input[type=file] that i want to have log its file names to the console.
normally i would do
```
const fileInput = document.querySelector('#filupload1');
fileInput.addEventListener("change", () => {
console.log(fileInput.files);
});
```
but this returns undefined, but according to MDN this should work:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Getting_information_on_selected_files
i can also see in the debuging for the event that .files is being sent to the worker, just not recieved.
i posed this to amphtml slack, and @kristoferbaxter suggested that this was because the files property isnt implemented, and i would like for it to be implemented.
the reason i would like to used the files property instead of just using the value property is in my usecase where a user is using the file input to upload multiple files at once, but value only returns the name of the first file added.
## Describe alternatives you've considered
my alternative right now is instead of showing the file names using .files, i just show wether files have been attached or not (from the value property), but it would be better to show the names of the exact files uploaded.
## Additional context
I've made a glitch project to show that it, currently, doesnt work, as you can see, undefined is logged to the console instead of the fileList object
https://befitting-crustacean-3jj6kt7lr3.glitch.me/ (edited)
Contributor guide
Research direction
Start by tracing how input[type=file] change events and the files property are represented when sent to and received from the worker. Compare the current behavior with the MDN FileList example and the linked Glitch reproduction. Done means fileInput.files is available in the worker and exposes the selected file names, including multiple files.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100