Bug 17125 - Add a FileList.drop(index) method
Add a FileList.drop(index) method
Product: WebAppsWG
Classification: Unclassified
Component: File API
PC All
: P2 normal
: ---
Assigned To: Arun
: 16834 (view as bug list)
Depends on: 24586
  Show dependency treegraph
Reported: 2012-05-20 18:22 UTC by Max Lohrmann
Modified: 2014-02-10 21:09 UTC (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Max Lohrmann 2012-05-20 18:22:10 UTC
Currently a FileList provided by a file input element is readonly.
This is problematic if the user added multiple files to a file list and then sees that he included one file too much and want's to remove it before uploading the files. Right now he can only start his selection from scratch. 
If there was a way to drop items from a FileList some JavaScript could display a list of selected files and allow to remove items.
Comment 1 Max Lohrmann 2012-05-21 19:06:38 UTC
An alternative approach that would solve the same problem would be allowing assignment of File objects to the file input element.

That way a developer could programatically split a multi input element to multiple single input elements.

This would also solve the additional problem that File objects today can also be obtained via Drag and Drop but cannot be assigned to an input meaning you have to "go all the way" and use XHR2 to do an upload of dragged files.

Given that a File object can only be created by the Browser there should be no security drawbacks in allowing assignment to file inputs.
Comment 2 Jonas Sicking 2012-05-21 23:59:35 UTC
I don't think comment 0 this is the right solution to this problem. For the same reason that we don't have mutating functions on NodeList.

If we want to allow removing files from a <input type=file>, then I think we should put methods directly on the element to do so.
Comment 3 Arun 2012-06-26 17:28:42 UTC
There are multiple ways this problem can be solved:

1. Typically the list of selected files can be previewed (GMail).
2. Erroneous files can be eliminated.
3. The File picker can be relaunched.

I think this isn't a useful feature.
Comment 4 Max Lohrmann 2012-06-26 17:52:12 UTC
> 2. Erroneous files can be eliminated.

This request was specifically because exactly that is not possible.
Once multiple files are selected for an input element you can only drop all of them at once.

I guess the way Gmail does it is by going "all the way": Getting the File objects and attaching them to a XmlHttpRequest.

I made this request because I think that should not be necessary. Browsers have been providing logic for file uploads for years now and making every web developer write another layer (the one that handles the XmlHttpRequest) on top of that probably won't make it better.

I think the suggestion as per comment 1 would be enough to solve this problem and also add a feature that is the logical consequence of having a File object.
Comment 5 Arun 2012-06-26 18:35:15 UTC
While it is true that you don't have to go "all the way" with the XHR part, it is also true that in order to remedy file selection errors, the user has to re-select.   

Could you clarify Comment 1?  What do you mean by "assignment of File objects to the file input element?"  Could you share some sample "ideal world" script to illustrate what you're thinking?
Comment 6 Max Lohrmann 2012-06-26 19:11:08 UTC
Well 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" in that
- 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

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 could stay in sync).
Comment 7 Arun 2013-03-13 18:52:40 UTC
*** Bug 16834 has been marked as a duplicate of this bug. ***