How to initialize file input dynamically with MDB 5?


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

Marvin Herbold pro premium priority asked 4 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 4 years ago

Can you say something more? File input does not need to be initialized when added dynamically. Look here: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2887341#js-tab-view


Marvin Herbold pro premium priority answered 4 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.


Denre pro premium priority answered 3 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>
  </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>

Grzegorz Bujański staff answered 3 years ago

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


Denre pro premium priority answered 3 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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
Tags