ampproject / ampproject/worker-dom

An input[type=file] element should have a FileList

Open
#419 0 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

We can specify files via input element. The specified files can be accessed from JavaScript via the input element's files attribute. This behavior is defined in [HTML standard](https://html.spec.whatwg.org/multipage/input.html#concept-input-type-file-selected) and [File API spec](https://w3c.github.io/FileAPI/#filelist-section), and also explained on [MDN Web docs](https://developer.mozilla.org/en-US/docs/Web/API/FileList).

I tried the following program with worker-dom and found that no filelist attribute is available on an input element.

~~~javascript
const container = document.createElement("div");
container.innerHTML = `




`;

const fileInput = container.querySelector("input[type=file]");
fileInput.addEventListener("change", e => {
const parentNode = e.target.parentNode;
const input = e.target;
const span = document.createElement("span");
if (input.files && input.files[0]) {
span.textContent = input.files[0];
} else {
span.textContent = "FileList is not available";
}
parentNode.appendChild(span);
});

document.body.appendChild(container);
~~~

## Expected result

File name is displayed when I specified a file via the input element.

## Actual result

No file name is displayed as following screenshot.

![image](https://user-images.githubusercontent.com/47718/55787231-ce38f180-5af0-11e9-81ee-ac7fd3d4cb5c.png)

Contributor guide

Open the contributing guide

Research direction

Reproduce the provided JavaScript example with an input[type=file] element and compare its behavior with the HTML standard, File API specification, and MDN FileList documentation. Trace the worker-dom input element entry point and make input.files available as a FileList so the example displays the selected file name.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.