ampproject / ampproject/worker-dom

Implement .files for input[type=file]

Open
#796 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.