How to initialize file input dynamically with MDB 5?

Doh! I was missing the form-control class.

What threw me off was the message on the file input document page for MDB5 that says "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."

Since mine wasn't rendering correctly (due to the missing form-control class) I automatically assumed it was due to not having the "requires additional JavaScript" run on the control.

It's probaby me, but I tried something similar without success and do have the form-control class set. In my case I use a text input and also the form-outline class.

My JS (taken from the mentioned example):

const wrapper = document.querySelector('#wrapper')
const addFileInputButton = document.querySelector('#append-file-input')
const fileUpload = (counter) => {
  return `
  <div class="form-outline mb-4">
    <input name="input" type="text" class="form-control form-control-lg" id="form_id_variation_options-${counter}" value="css, html, javascript, css" data-blacklist=".NET,PHP">
    <label class="form-label" for="form_id_variation_options-${counter}">Options</label>
  </div>
`;
}

addFileInputButton.addEventListener('click', () => {
  wrapper.insertAdjacentHTML( 'beforeend', fileUpload(1) );
})

My HTML:

<div class="container mt-5">
  <button id="append-file-input" class="btn btn-primary">
    append file input
  </button>
  <form>

      <div id="wrapper">
      </div>
 </form>

</div>

In the case of inputs, the situation is different. Initialization is required here, here you will find more about it: https://mdbootstrap.com/docs/standard/forms/input-fields/#section-dynamic-input-initialization

I prepared a snippet based on your code: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3695227#html-tab-view

Thanks, that worked perfectly. Funny bit is that I already did that for the select boxes. Not sure how I could have missed that in the docs.