input-file: create a plugin #31085
input-file: create a plugin #31085
Conversation
Johann-S
force-pushed
the
feat/input-file
branch
5 times, most recently
from
25ecae6
to
48f93a6
Compare
Johann-S
force-pushed
the
feat/input-file
branch
from
48f93a6
to
dc6f45e
Compare
site/content/docs/5.0/forms/file.md
Outdated
| {{< callout info >}} | ||
| The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs. | ||
| {{< /callout >}} | ||
|
|
||
| ## Default | ||
|
|
||
| The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text. |
There was a problem hiding this comment.
This might need to be reworded since it won't require extra JS, but our plugin :)
There was a problem hiding this comment.
if you have any ideas do not hesitate 😅
There was a problem hiding this comment.
Also, not sure if this should be listed as a component or not (probably not)
@mdo please have a look and let us know :)
Johann-S
force-pushed
the
feat/input-file
branch
from
34f421f
to
05cc51b
Compare
Johann-S
force-pushed
the
feat/input-file
branch
2 times, most recently
from
e6a14df
to
fdaccc5
Compare
|
Any idea when this would be ready for review? |
|
@mdo this is ready but please check out the comments above. |
|
|
||
| #### Via data attributes | ||
|
|
||
| Activate a file input without writing JavaScript. Set `data-toggle="file-input"` on a `.form-file` element. |
There was a problem hiding this comment.
data-toggle doesn't feel right since we're not exactly toggling something. Not sure what else do to just yet though either, so open to ideas.
There was a problem hiding this comment.
maybe something like: data-enable ?
| <button id="btnResetFormFileInput" class="btn btn-primary mt-3"> | ||
| Reset form | ||
| </button> |
There was a problem hiding this comment.
Could this be moved inside the form with type="reset"?
There was a problem hiding this comment.
yep the place doesn't really matter
There was a problem hiding this comment.
This is still pending AFAICT @Johann-S :)
There was a problem hiding this comment.
I wasn't sure if @mdo would like to tackle that or not
|
Any reason @mdo it shouldn't be in Alpha 2 ? There are comments which are waiting for you here, and after those fixes it should be good to go |
XhmikosR
force-pushed
the
feat/input-file
branch
from
ce55fbc
to
8352b7b
Compare
XhmikosR
force-pushed
the
feat/input-file
branch
from
8352b7b
to
d41cc44
Compare
js/src/file-input.js
Outdated
| // Public | ||
|
|
||
| dispose() { | ||
| [window, this._element].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY)) |
There was a problem hiding this comment.
Might be better to remove the forEach call here since we only have 2 calls?
|
FWIW, next week (October 20th), Firefox 82 will ship. This version will support the ::file-selector-button pseudo element. Webkit has been supporting This means we style file inputs without any JS, see https://codepen.io/MartijnCuppens/pen/VwjvXpe?editors=1100 |
|
@MartijnCuppens our target browsers aren't just Chromium latest, though. |
|
@XhmikosR, |
|
Closing for #31955. |
Demo: https://deploy-preview-31085--twbs-bootstrap.netlify.app/docs/5.0/forms/file/
Edit:
Closes #30265