Dynamically adding new custom file inputs and reinitializing leads to wrong default texts

[daveekr]

Hey folks,

I experienced following behavior in my web app:
So my page has one custom file input per default. However if a file is selected, a new custom file input is appended to the form, hence bsCustomFileInput needs to be reinitialized in order to get the recently added file inputs to work. I tried both bsCustomFileInput.init() and bsCustomFileInput.init(<field.selector>), both lead to wrong default texts as the second initialization sets the currently selected filename as the default text and overrides the actual default value for ALL custom file inputs. Eg:

input1.files = [] (default: "Choose file")
= user input ("file1.txt") =>
input1.files = ["file1.txt"] (default: "Choose file")
input2.files = [] (default: "Choose file", NOT initialized yet)
= bsCustomFileInput.init() or bsCustumFileInput.init(<input1.selector>) =>
input1.files = ["file1.txt"] (default: "file1.txt")
input2.files = [] (default: "Choose file")

Unfortunately I do not see any kind of quick workaround for this particular problem, so I think I am going for my own solution for now.

For a future release I think it would be nice to have a function to add new custom file inputs to the document or reinitialize the inputs without losing currently not used default values.

[Johann-S]

Hi @g0rill4z is it possible for you to create a live example of your issue via CodePen/JS Bin or Stackblitz and report back with your link ?

It'll help me to fix that 👍

[DevelopFaster]

Not a bug
First, init you need to use

bsCustomFileInput.init()

In method (add new element)

bsCustomFileInput.destroy();
bsCustomFileInput.init();

[alstr]

Not a bug
First, init you need to use

bsCustomFileInput.init()

In method (add new element)

bsCustomFileInput.destroy();
bsCustomFileInput.init();

This only worked for me if I called destroy before adding a new element and init after.

If I called it after cloning the input and clearing the value, the text remained the same as the original input.