Skip to content

input-file: create a plugin#31085

Closed
Johann-S wants to merge 5 commits intomainfrom
feat/input-file
Closed

input-file: create a plugin#31085
Johann-S wants to merge 5 commits intomainfrom
feat/input-file

Conversation

@Johann-S
Copy link
Member

@Johann-S Johann-S commented Jun 17, 2020

Demo: https://deploy-preview-31085--twbs-bootstrap.netlify.app/docs/5.0/forms/file/

Edit:

  • some unit tests are disabled for Edge because it opens a real file chooser and made them failed

Closes #30265


## 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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might need to be reworded since it won't require extra JS, but our plugin :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you have any ideas do not hesitate 😅

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, not sure if this should be listed as a component or not (probably not)

@mdo please have a look and let us know :)

@XhmikosR XhmikosR marked this pull request as draft June 19, 2020 08:51
@Johann-S Johann-S force-pushed the feat/input-file branch 2 times, most recently from e6a14df to fdaccc5 Compare June 19, 2020 13:16
@XhmikosR XhmikosR requested a review from mdo June 25, 2020 15:09
@mdo
Copy link
Member

mdo commented Sep 10, 2020

Any idea when this would be ready for review?

@XhmikosR
Copy link
Member

@mdo this is ready but please check out the comments above.

@XhmikosR XhmikosR marked this pull request as ready for review September 16, 2020 16:43
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe something like: data-enable ?

Comment on lines +79 to +81
<button id="btnResetFormFileInput" class="btn btn-primary mt-3">
Reset form
</button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be moved inside the form with type="reset"?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep the place doesn't really matter

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is still pending AFAICT @Johann-S :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure if @mdo would like to tackle that or not

@Johann-S
Copy link
Member Author

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 XhmikosR requested a review from mdo September 30, 2020 13:50
// Public

dispose() {
[window, this._element].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be better to remove the forEach call here since we only have 2 calls?

@MartijnCuppens
Copy link
Member

FWIW, next week (October 20th), Firefox 82 will ship. This version will support the ::file-selector-button pseudo element. Webkit has been supporting ::-webkit-file-upload-button for a while.

This means we style file inputs without any JS, see https://codepen.io/MartijnCuppens/pen/VwjvXpe?editors=1100

@XhmikosR
Copy link
Member

@MartijnCuppens our target browsers aren't just Chromium latest, though.

@MartijnCuppens
Copy link
Member

@XhmikosR, ::-webkit-file-upload-button has been around for a while, it's supported in Chrome 1 and Safari 3. Firefox tends to update pretty fast, so by the time BS5 releases, this will also work for (nearly) all FF users.

@mdo
Copy link
Member

mdo commented Oct 28, 2020

Closing for #31955.

@mdo mdo closed this Oct 28, 2020
@MartijnCuppens MartijnCuppens deleted the feat/input-file branch October 28, 2020 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bs-custom-file-input doesn't work anymore since the form updates

4 participants