markusslima / bootstrap-filestyle

jQuery customization of input html file for Bootstrap Twitter

Home Page:http://markusslima.github.io/bootstrap-filestyle/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support for both button before and after

holtkamp opened this issue · comments

Currently one button is supported, either:

  • before the input field
  • after the input field

It might be nice to support both a button before and after. This way we can use icons to 'guide' the user into explaining what the input field is about. For example for image uploading:

screen shot 2016-04-14 at 14 05 55

JSFiddle for the source

I understand your place but this type of design is not advisable. Both buttons should work which is not their proposal. As some of the buttons would be just to inform generate a cruel question to the user. Which button do I click?

thanks for the informative response. Note the one on the left is not really a button / can not be clicked.

Bootstrap refers to this as an add-on Button: http://getbootstrap.com/components/#input-groups-basic

It DOES hint the user on what kind of action is expected from him...

I understand your place. Currently I work with interface construction and interface optimization and usability. I can tell you exactly that kind of legend, in this particular case, only hinders the user's reading.

mmm, OK, what would be your suggested best practice? Maybe use an in-field
legend like "Please select an image..."?

I guess this issue can be closed for the time being...
On May 4, 2016 08:08, "Markus Lima" notifications@github.com wrote:

I understand your place. Currently I work with interface construction and
interface optimization and usability. I can tell you exactly that kind of
legend, in this particular case, only hinders the user's reading.


You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#114 (comment)

If you want to specify who should choose an image why not write "Choose an image" along with the file icon? While not as elegant, it is a simple, direct and objective message that explains exactly what should be done. https://jsfiddle.net/v7dewcsa/3/