search

ng-bootstrap / ng-bootstrap

Angular powered Bootstrap
https://ng-bootstrap.github.io
MIT License
8.22k stars 1.55k forks source link

Adding bootstrap custom-file-input logic #3846

Open 4javier opened 4 years ago

4javier commented 4 years ago

I looked for info but didn't find anything. Bootstrap provides a custom-file-input class that basically hides the browser file-input element and add an equivalent stylizable label. The problem with this approach is that the label doesn't update its value once the file is selected. The doc itself suggest to use a little external library to obtain the classic behaviour

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

You could take a look at its VanillaJS code: https://www.npmjs.com/package/bs-custom-file-input Or you could even take inspiration by this angular-oriented article: https://medium.com/@coco.boudard/bootstrap-custom-file-input-with-angular-9039681cd025

bastienmoulia commented 4 years ago

It could be nice to have a directive for that, and to choose the "Browse" label in the HTML for i18n purpose and not in CSS.

EDIT : My mistake, you can already translate "Browse" with data-browse="Browse" i18n-data-browse.

4javier commented 4 years ago

I wish to use this ticket of mine to invite @benouat and every other ng-bootstrap collaborator to join a recent Angular Community discord server. It counts over 1000 users among which are present Google Developer Experts and Angular Team Members. They'd happily create a ng-bootstrap specific room that you could monitor without the rest of the "noise", like they already did for other common libraries. The invite is open to everyone willing to join, of course. I Think it would be a nice community live-support service: https://discord.gg/yyZKECH

If this message is unwelcome, I apologize in advance. Just let me know, and I'll delete it.