Update <input type='file'> UI based on UX feedback




Layout: Form Controls
5 years ago
4 years ago


(Reporter: mounir, Unassigned)




Firefox Tracking Flags

(Not tracked)




5 years ago
<input type='file'> had a few changes applied in Firefox 22 but UX was never consulted. Some changes are not really appreciated, for example the fact that the button is now on the left or the file names are shown without paths. Having some UX feedback on this would be great.

I personally think that it might be good to move the button back on the right but I would keep file names instead of file paths.

Madhava, Doug said you could look into it :)

Comment 1

4 years ago
Not sure it means anything, but while I don't care where the browse button is, I do prefer having a path shown, as it makes it clearer where the file is coming from. When I first encountered this, I got worried that the file hadn't actually been selected properly and had to double check.

The only problem before was if the path was too long for the text field. But that can be fixed by making sure the field is right aligned (or left aligned on RTL systems).

And if you are just going to use filenames, why not show multiples instead of just a generic "# files selected" if you have the room?

Comment 2

4 years ago
There really should be somewhere that documents why these changes are made. Bugzilla, though perhaps not ideal, seems a reasonable canonical place for that. Why is there no explanation of a reason for the change in bug #838694. Web developers deserve an explanation if Firefox changes something so fundamentally consistent over roughly two decades. 

That said, I don't really mind which side the button is on, so long as changes such as text-overflow::ellipsis support is maintained as this looks quite good in Aurora ATM IMHO.

I wonder if the <button> element will ever get type="file" support and thus make most form fields in Firefox finally able to be styled, though the select arrow will still stand out like dog's .... #649849
You need to log in before you can comment on or make changes to this bug.