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

Add a 'clear' icon to text box

hitched97 opened this issue · comments

Would be nice to have to option to put a small x to the right of the text box containing the filename. Clicking the x would invoke the .clear() method. Select2 has this capability, using the allowClear setting.

Here's a stab at it (using FontAwesome for the x), without configurability.

filestyle-patch.txt

Ideally, there would be a flag to turn it on and off, and maybe a setting to set what to use for the x (in the above patch, that would be set to <i class="fa fa-times"></i>).

Also, the x should probably be muted (and have a different cursor?) when there is no file selected.

I see now there is a fork with a more thorough implementation of this: https://github.com/Cediddi/bootstrap-filestyle/

Sorry I did not answer before. This type of input can be done manually without problems, it is not necessary to implement such functionality.

True, but it's much cleaner to set a flag than to add $('#certificate_file_input').next().find('input').after('<div id="certificate_file_input-close" class="input-group-addon" style="padding:6px 4px;cursor:pointer;"><i class="fa fa-times"></i></div>'); and a corresponding on-click function for every file element.