File plugin does not work on dynamically inserted content

[jasonpfrye]

Versions
BulmaJS: 0.10.0
Browser: Chrome latest
Operating system: Windows 10

Describe the bug
When dynamically inserting a file field, the file name no longer appears in the span. Is there a way to tell the bulmajs to traverse the dom a second time?

Expected behavior
Dynamically inserted form fields, like file fields, should also get the benefit of the bulmajs file treatment.

Thank you for the time you've put into this library. Very cool and extremely helpful.

[VizuaaLOG]

I would suggest manually instantiating the file plugin for that element, this way you can destroy the instance of the element is removed dynamically as well.

Retraversing the DOM could the same plugin to be created again.

I think I'll add this to the docs for others as well.

[gieglas]

Hi, I have encountered the same issue myself. If file HTML is created dynamically from JS, the plugin does not work. I tried to instantiate as it is suggested here, but I could not find a documentation on how to do that.

Could you please point me to the right direction?

[VizuaaLOG]

Hey @gieglas 👋 ,

If you're using the latest 0.12 version you should be able to do something like the following:

let myFileInput = Bulma(fileInputSelector).file();

Where fileInputSelector is the CSS style selector pointing to the element with the file class. This should create an instance of the file plugin with the default configuration. Do let me know if this doesn't work for you or if you're using a version other than 0.12

This does appear to now be missing from the most recent documentation, likely since the major API rewrite that happened in the latest versions. I'll raise a ticket on the docs branch to re-add this somewhere more generic as it does now apply to all plugins and not just the file in this case.

[gieglas]

Where fileInputSelector is the CSS style selector pointing to the element with the file class.

Thank you, for your help, I was wrongly pointing to the input instead of the div element with the file class. Now it's working perfectly