File input problem
in [CSS]
|
Prev: Help with a Table Wanted
Next: background shorthand
From: David Stone on 4 Dec 2009 10:56 In article <55537546-2fa4-4295-ab95-d96e8e4b1eb7(a)p8g2000yqb.googlegroups.com>, Mark Smith <marksmith5555(a)jungle-monkey.com> wrote: > I've been spending the last day trying to prettify the file inputs on > some forms. > > CSS support is almost not existent for file inputs on all the major > browsers. > > So I decided to hide the ugly standard file input control and wrap > some javascript around some styleable buttons and input text boxes to > drive the actual file input. > > This works in IE6, IE7 and Safari but unfortunately not Firefox. > > Code to replicate: > <form method="post" enctype="multipart/form-data" action="filetest/ > upload"> > <input type="file" name="file" id="file" value="" /> > <input type="button" value="Browse for file" > onclick="document.getElementById('file').click();"/> > </form> What exactly is it about the above that you don't like? When I click on the resulting "Browse..." button, I see exactly the system file dialog I am used to seeing - and expect - complete with all the features of that dialog that I have come to rely on. (FF 3.5.5/OS X) Is it really your intention to override the file dialog on the user's OS, or are you simply trying to change the appearance of the button that invokes it?
From: Mark Smith on 7 Dec 2009 05:38 On Dec 4, 3:56 pm, David Stone <no.em...(a)domain.invalid> wrote: > In article > <55537546-2fa4-4295-ab95-d96e8e4b1...(a)p8g2000yqb.googlegroups.com>, > Mark Smith <marksmith5...(a)jungle-monkey.com> wrote: > > > > > I've been spending the last day trying to prettify the file inputs on > > some forms. > > > CSS support is almost not existent for file inputs on all the major > > browsers. > > > So I decided to hide the ugly standard file input control and wrap > > some javascript around some styleable buttons and input text boxes to > > drive the actual file input. > > > This works in IE6, IE7 and Safari but unfortunately not Firefox. > > > Code to replicate: > > <form method="post" enctype="multipart/form-data" action="filetest/ > > upload"> > > <input type="file" name="file" id="file" value="" /> > > <input type="button" value="Browse for file" > > onclick="document.getElementById('file').click();"/> > > </form> > > What exactly is it about the above that you don't like? When > I click on the resulting "Browse..." button, I see exactly the > system file dialog I am used to seeing - and expect - complete > with all the features of that dialog that I have come to rely on. > (FF 3.5.5/OS X) Is it really your intention to override the file > dialog on the user's OS, or are you simply trying to change the > appearance of the button that invokes it? The latter. I obviously want to keep the modal dialog as this is platform specific. I just want to invoke the dialog from script, rather than using the unstyleable file input button.
From: Mark Smith on 7 Dec 2009 05:50 On Dec 4, 2:40 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > On Dec 4, 8:57 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote: > > > I've been spending the last day trying to prettify the file inputs on > > some forms. > > > CSS support is almost not existent for file inputs on all the major > > browsers. > > > So I decided to hide the ugly standard file input control and wrap > > some javascript around some styleable buttons and input text boxes to > > drive the actual file input. > > The "ugly" file buttons are what the users are used to. ;) > But they look different to all the other input buttons on the side. Looking different to every other button on the site is more likely to confuse the user. I don't want to change the layout or behavior, I just want to make the "Browse" button look the same as all the other buttons on the page. It looks weird otherwise. > > > > This works in IE6, IE7 and Safari but unfortunately not Firefox. > > That is too bad. > Indeed. > > > > Code to replicate: > > <form method="post" enctype="multipart/form-data" action="filetest/ > > upload"> > > <input type="file" name="file" id="file" value="" /> > > <input type="button" value="Browse for file" > > onclick="document.getElementById('file').click();"/> > > </form> > > > This is an almost 10 year old bug that is still open:https://bugzilla.mozilla.org/show_bug.cgi?id=36619 > > Read carefully. It is not a bug at all. There are security concerns > and there is no spec that says this behavior must exist in a browser. > So maybe they will change it, maybe they won't... > This is still an open bug and set to "Future" btw. This feature exists in almost every other browser. And I did read the comments, very carefully. There is no real security risk here, as one commenter put it: "as to your first concern, we already allow webpages to display modal informational messages with alert(), modal ok/cancel dialogs with confirm(), and under some circumstances to pop up new modeless windows with open (). I submit that there are ways to annoy a user already, and popping up a file picker dialog is no worse than any of the existing methods (which are also not seeing widespread abuse). As to any potential security issue, I think that even the most naïve computer user knows what a file picker is and what it does. The only thing they may not understand is that the file they select in that dialog will be transmitted to the server. If we're really concerned about that, we ought to put a confirmation message during the submit process that informs the user" Oh, and for anyone else that is interested, I found an option 5. Ajax uploads seem to be triggerable from script: http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm
From: Stefan Weiss on 7 Dec 2009 06:54 On 07/12/09 11:50, Mark Smith wrote: > Oh, and for anyone else that is interested, I found an option 5. Ajax > uploads seem to be triggerable from script: > > http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm Did you look at how this was actually implemented? Apart from requiring JQuery, that demo page has file upload fields with opacity:0 overlayed above its buttons and links. I'd say this qualifies as | #3 Use some hacky CSS and overlays to style the file picker. They're also moving these fields around whenever the mouse moves, which causes the mouse cursor to blink very fast in Firefox 3.0. Worst of all, they initiate the upload as soon as a file has been selected (before the user submits the form). This is *NOT* how forms usually work; I hope this behavior can be disabled. Now try turning off CSS and/or JavaScript -> upload fields are broken or missing :-( As far as I can see, PPK's example has the same problem. For what it's worth, I don't even try to style these elements anymore. I just explain the situation to the client, and put the upload field at the very end of the form, so it doesn't mess up the rest of the layout. :wq stefan
From: David Mark on 7 Dec 2009 07:02
On Dec 7, 5:50 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote: > On Dec 4, 2:40 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > > > On Dec 4, 8:57 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote: > > > > I've been spending the last day trying to prettify the file inputs on > > > some forms. > > > > CSS support is almost not existent for file inputs on all the major > > > browsers. > > > > So I decided to hide the ugly standard file input control and wrap > > > some javascript around some styleable buttons and input text boxes to > > > drive the actual file input. > > > The "ugly" file buttons are what the users are used to. ;) > > But they look different to all the other input buttons on the side. And who did that? > Looking different to every other button on the site is more likely to > confuse the user. I agree completely. > > I don't want to change the layout or behavior, I just want to make the > "Browse" button look the same as all the other buttons on the page. It > looks weird otherwise. No, the other ones look weird. ;) > > > > > > This works in IE6, IE7 and Safari but unfortunately not Firefox. > > > That is too bad. > > Indeed. > > > > > > > > Code to replicate: > > > <form method="post" enctype="multipart/form-data" action="filetest/ > > > upload"> > > > <input type="file" name="file" id="file" value="" /> > > > <input type="button" value="Browse for file" > > > onclick="document.getElementById('file').click();"/> > > > </form> > > > > This is an almost 10 year old bug that is still open:https://bugzilla..mozilla.org/show_bug.cgi?id=36619 > > > Read carefully. It is not a bug at all. There are security concerns > > and there is no spec that says this behavior must exist in a browser. > > So maybe they will change it, maybe they won't... > > This is still an open bug and set to "Future" btw. This feature exists > in almost every other browser. It is _not_ a bug. Read it again (or just take my word for it as I have read it). > > And I did read the comments, very carefully. There is no real security > risk here, as one commenter put it: That's your opinion. > > "as to your first concern, we already allow webpages to display modal > informational messages with alert(), modal ok/cancel dialogs with > confirm(), > and under some circumstances to pop up new modeless windows with open > (). I > submit that there are ways to annoy a user already, and popping up a > file > picker dialog is no worse than any of the existing methods (which are > also not > seeing widespread abuse). They are clearly wrong. A file picker dialog is much worse, especially considering it is more of an upload dialog in this case. ;) > > As to any potential security issue, I think that even the most naïve > computer > user knows what a file picker is and what it does. How does that mitigate the problem? > The only thing > they may not > understand is that the file they select in that dialog will be > transmitted to > the server. That could lead to one hell of a misunderstanding. > If we're really concerned about that, we ought to put a > confirmation message during the submit process that informs the user" Ought they? > > Oh, and for anyone else that is interested, I found an option 5. Ajax > uploads seem to be triggerable from script: > > http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm I see. And it uses what? |