[whatwg] File Upload Control

Mikko Rantalainen mira at st.jyu.fi
Wed Aug 18 07:54:54 PDT 2004

Matthew Thomas wrote:
> On 18 Aug, 2004, at 12:11 PM, Lachlan Hunt wrote:
>> ...
>> How exactly would it make it any easier for a user to be tricked into 
>> selecting and uploading a private file if there was no visible browse 
>> button?  The user would just be forced to type the full path manually, 
>> rather than selecting it with a GUI, so they would still no they were 
>> selecting a file.
>> ...
> Extensive discussion: http://bugzilla.mozilla.org/show_bug.cgi?id=57770

I think that text input and "Browser..." control combination should 
be replaced with a single button. The button might have text 
"Browse..." by default and once a file or more have been selected, 
the button label would be changed to the filename (I think file name 
without extension would be best).

For the rare cases when one already has the required filename with 
full path on clipboard ready to be pasted into the file input field 
the user would need to open the file browser just to get text input 
field to paste the string but I don't think that's a real problem.

So markup like

<input type="file" value="*.png" />

would render as just a button like (ASCII graphics):

+-----------+         +----------------------+
| Browse... | or even | Browse PNG images... |
+-----------+         +----------------------+

and after selecting a file (say "~/temp/cool.png") the file input 
would render as

| cool.png |

Or perhaps the UA could render a thumbnail of that image? In case 
multiple images have been selected the button should list them all:

| cool.png            |
| red.png             |
| a-long-filename.png |

This way CSS could be used to style the control (it should probably 
have "display: inline-block" by default) just like any other button 
or rectangle. In addition, inputting real filenames by accident 
would be impossible. There's no reason a file browser that pops up 
would need to be styled.


More information about the whatwg mailing list