w3c / w3c/FileAPI

Add FileList constructor

Open
#24 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature request TPAC2024
Dominant language
HTML
Stars
118
Forks
52
Avg merge
9d 16h
Merged PRs (30d)
1

Description

Split out from https://www.w3.org/Bugs/Public/show_bug.cgi?id=17125 :

The

<input type="file" name="something" />

element has always been readonly (you can't change value) for security purposes.
That makes sense as a string could always be manipulated by JS.

The File object on the other hand should be "safe", as in

  • Only the browser can create one on user request (ie. by file input or drag and drop)
  • JS cannot change it in any way

So it should not be a security issue to allow assignment to a file input.
For example:

<input type="file" name="something[]" onchange="splitFiles();" id="in1" multiple="multiple" />
function splitFiles() {
  var in = document.getElementById('in1');
  //create single inputs
  for(var i=0;i<in.files.length;i++) {
        var newEl = document.createElement('input');
        newEl.name = "something[]";
        newEl.id = '...';
        newEl.type = "file";
        newEl.value = in.files[i]; // <-- assignment of file object
        document.appendChild(newEl); //add for upload
        //create some UI to remove this input
        //...
    }
    //remove the multi-input
    in.parent.removeChild(in);
}

This code would split a multi-file-input back to multiple single-file inputs (that way applications with a legacy backend that only supports the classical way could also support multi-file-inputs).

Another use would be with File objects obtained by drag and drop.
Right now those require XHR to upload. Allowing to make them a selection of a file input could simplify some situations as well as provide richer UI (when showing a traditional file input together with a drop area those would stay in sync).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the FileList constructor request and the file-input, File-object, drag-and-drop, and XHR behavior described in the issue. Define the intended assignment semantics and completion criteria before locating the relevant specification text or tests; the issue provides no repository files or test entry points.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
api, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.