887758 - input type file in firefox 22

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[Atharvan]

Attachment: a.jpg

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130618035212

Steps to reproduce:

just open http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file


Actual results:

file input field looks differently in firefox 22 (please refer attached file a.jpg)


Expected results:

please view http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file this link in firefox 21

Comment 1

[Alice0775 White]

This is by a design. See Bug 345195

Comment 2

[Loic]

Plus bug 838705 for (no) file names.

Comment 4

[geoffk]

Hi, this really isn't invalid. The new design puts black text on top of whatever background the form has, so if the background is dark or black the message ('No file selected.', for example) is invisible to the user. This is a problem as there are no obvious styling changes (apart from a wholesale change of site design from dark to light background) that can be applied and no way of targetting them at Firefox 22. No other browser or previous version of FF needs modification, so this is a bug.

Comment 5

[Michael Fort]

Forgetting the technical issue of whether the error message "No file selected" for a moment; from a user's point of view, being told that no file has been selected when I haven't tried to select a file sounds like a pedantically prissy programmer is having a go at me.

The disappearance of the input box was a surprise but makes sense because most users select by browsing most of the time; displaying what appears to be an error message is more like a pre-crime notification, aka an attack of the PKDicks.

As an idea, it might be better couched as a status message, eg 'No file yet selected'

Comment 6

[geoffk]

Agree with Michael, the disappearance of the input box comes as a 'surprise' and looks so flawed that I suspected some late-night CSS botch. As well as introducing a problem that wasn't there before, we now have reduced functionality. People really do copy and paste input links sometimes, for example when entering two long but very similar links to a large number of organised files. Just because users do not usually do that does not mean that it isn't a serious handicap on some of the occasions they do want to. Problem comes down to needing white text for the new file input on late version FF ONLY while have black text elsewhere (for the familiar white input BGs) and on all other browsers. Put another way, this is the only text tha appears outside of the input box and there is usually a strong contrast between the inside of the input and the outside. 'Dark text/light background' or 'light text/dark backround' are both fine, but the new input needs an impossible mix of both - or targetting of CSS at just some variants of just one browser.

Comment 7

[geoffk]

My summary: most input boxes are white on most browsers, so you style the text dark. If a site has a dark background, text on the new input[file] appears outside of the white input box on late versions of FF - but on no other browsers. So you now have to target late versions of FF with their own CSS rule for this input.

Comment 8

[geoffk]

Okay, noticing that Bugzilla's demo file input box was given background-color: #FFF in CSS, I put that on my own site and now have visible text for inputs of type [file] in all browsers including FF22/23. It's going in my reset CSS forthwith. As all inputs have a white background color on all browsers pre FF22, a very large number of dark-background sites will not have that CSS rule in place. So, SUGGESTED FIX, the new input[file] is given a white background by default, as per all other inputs?
And I still think the previous input was better; not everyone wants to point and click via multiple directories when most of the link is already on the page in another input (if you're not using late version FF).

Comment 9

[Loic]

CC'ing Mounir, he could give you more details about this choice.

Comment 10

[Mounir Lamouri (:mounir)]

It is not clear at all what this bug is about. The first comment says that the behaviour is different but it is not clear how this is bad. The comments after the first are mostly geoffk trying to complain about the dark background issue he filed in bug 890252 so I will not comment about that here.

Comment 11

[Loic]

Yes, I agree, the 1st reporter has been disturbed by the new design of <input type="file"> introduced into FF22 (invalid bug), the others complain about possible CSS styling issues with the default design and should file new bugs.

Comment 13

[jay b]

It is a problem for me for two reasons.
First, because when filling in a form of multiple input fields, it's easy to check that all the boxes have something in them but when a box is no longer there, one can't readily tell there is an item missing.  A bit of text outside saying 
Second, when I've got the details in clipboard, I cannot post it directly into the box.
I don't understand why it needed to be changed or the advantages of the new style.
If this really has been redesigned, could there be an option to reconfigure it to work in the traditional way?

Comment 14

[jkirk_14]

"No file selected." looks like an error to the user - like the form is broken.  This is bad design

Comment 15

[geoffk]

I prefer an empty box to the "No file selected." message for two reasons, but the main one is that many users will see this as an indication that a file (for example, a product photograph) has NEVER been selected. It's better to show an empty box, which is read as "no-one has navigated to a file without uploading it". The new style of input is similar to that used in Chrome and Safari. The guys doing this change have achieved what was asked of them, but I just think that this was something FF (and IE) already had right.

Comment 17

[tcaudilllg]

Reopen the bug damn it.

Comment 18

[tcaudilllg]

(In reply to Alice0775 White from comment #1)
> This is by a design. See Bug 345195

Are you dumb?

Comment 19

[tcaudilllg]

You idiots have pretty much told the internet that if they want their webpages to look consistent with design they have to go to IE.

How dumb is that? I guess we're going to have to find out. I will never go to IE. I want to see my SOCIAL LIBERAL values incarnate in my browsing experience, developed by a SOCIAL LIBERAL organization. Mozilla is no longer that organization.

Comment 20

[Loic]

Before posting insulting and pointless messages, you need to read the Bugzilla etiquette.
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html

Comment 21

[tcaudilllg]

How to beat this "feature".

INPUT element style can be made 0px high by 0px wide (making it invisible and unclickable by the user). Make a file input element in this fashion. Next to it, make a button with the value "Browse..." and tell its onclick event to click your file input element. Now make another input control of type "text", positioning it next to your Browse button. Set your file input control's onchange property to assign the file input's value to the textbox you made. This way the plain text readout of the selected file is invisible and you end up with roughly the same layout you had before.

Now of course myriad existing websites have already been disfigured by this design, but we don't yet have a feasible alternative (although I guess IE does it the traditional way... man this is really stupid... are there operatives in Mozilla trying to kill it...:? Not that I care... this browser's design is horrible). All of the features, none of the common sense. It is enough for me that the wayward aspirations of the idiot designer of this paradigm (apparently to accommodate the lowest common intellectual denominator, the like of which uses IE anyway) have been thwarted in that the file name isn't bleeding all over the place. That particular idiot consistently fails to realize that only intelligent users are sticking with Firefox in the first place! And the only reason they use it is because its competition up 'till now has been completely unintelligent. Maybe they should go to Chrome, where they belong.

Comment 22

[geoffk]

Or:

input {background-color: #FFF; }