Why "HTML <input type='file' />" has "files" property in JavaScript?

Question

Consider this HTML snippet:

<input type='file' id='fileUpload' />

To get access to this control in JavaScript, we can write:

var temp = document.getElementById('fileUpload');

OK, don't get mad, I know you all know this. But the interesting part is that, temp variable now has a property called files, (not file, but files, the plural form) which is of type FileList, which of course is a list of File objects. This semantically should mean that uploading multiple files via one and only one HTML file upload control should be possible. However, you can't upload multiple files this way and there are many workarounds, not straight usage.

How do you explain this paradox?

Update: I built this jsfiddle to see one of the answers in action.

Answer 1

In HTML5, The multiple attribute specifies that multiple values can be selected for an input field.

<input type='file' multiple='multiple' />

These links should help:

http://www.w3schools.com/html5/html5_form_attributes.asp

http://rakaz.nl/2009/08/uploading-multiple-files-using-html5.html

Answer 2

According to the Gecko DOM Reference, it is only applicable when using the file upload element via drag-n-drop.