bs-custom-file-input | A little plugin for Bootstrap 4 custom file input | Theme library

I am trying to learn basic bootstrap/CSS/HTML. When my navbar collapses, none of the links are displayed when clicked on. I have them set up as images on the navbar, so I am not sure if that has something to do with it. Here is my code, thanks so much for taking a look!

The main problem (no label for choosen filname in bootstrap 4 upload field) was solved with the plugin (https://github.com/Johann-S/bs-custom-file-input)

You can use the "bs-custom-file-input" to display the choosen filename in the bootstrap 4 file upload field.

But this does not work when I use array Collections in my FormType. (to add multiple dynamically new upload fields in my form)

I use this example to add mutiple dynamic upload fields: https://symfony.com/doc/current/form/form_collections.html#allowing-new-tags-with-the-prototype

This example adds html code dynamically - so I can have many Upload Fields. The problem is that bs-custom-file-input does not work with dynamcally created new Upload Fields but only with a standalone normal Upload Field.

Here is the code:

I'm trying to get the text box label to change on my File upload. I'm using React-Bootstraps Form.File component and read that bs-custom-file-input will work. My general code is as follows

I got a Bootstrap form with a recommended plugin to animate a custom file input: bs-custom-file-input. See: https://getbootstrap.com/docs/4.5/components/forms/#file-browser The form contains an input field (type="file") to add an attachment. If a user selects a file, which filesize is above 1MB, it shows an alert box with an error message.

How can I clear the filename in the input field after the error message?

Here is my code so far:

HTML form