Topic: How to initialize file input dynamically with MDB 5?

Marvin Herbold priority asked 3 years ago

How do you dynamically initialize a file input with MDB 5? There is zero JS documentation on the MDB 5 page for file inputs.

Grzegorz Bujański staff answered 3 years ago

Can you say something more? File input does not need to be initialized when added dynamically. Look here:

Denre priority answered 2 years ago

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.

Grzegorz Bujański staff answered 2 years ago

In the case of inputs, the situation is different. Initialization is required here, here you will find more about it:

I prepared a snippet based on your code:

Denre priority answered 2 years ago

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>

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


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

      <div id="wrapper">


Marvin Herbold priority answered 3 years ago

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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No