MDB 5 Pro Plugin components - File upload not loading

Topic: MDB 5 Pro Plugin components - File upload not loading

jcrowell priority asked 1 year ago

Using any of the instructions from, create a file upload element and use it in a form

None of the methods work, javascript, jquery or attributes

via javascript it says that mdb.FileUpload is not found

plugins/js/all.min.js and plugins/css/all.min.css are included

Marcin Luczak staff commented 1 year ago

Hello, We are sorry for your inconvenience with this plugin. I've created a snippet for you showing how the plugin should be initialized via HTML attributes and updated via JavaScript.

If your problem will persist please create a snippet with your code.

jcrowell priority commented 1 year ago

I think I've realized what it is. It's initialized on document load and I am loading all of mine through twig partials in October CMS via ajax calls. This means the html for mine are created after document load. If I were to initialize these elements via a success data attribute, what would be the default class that I would use to initialize the snippet you provided above in jquery?

Marcin Luczak staff answered 1 year ago

In this case I would suggest you to use initialization via JavaScript where your initializeAvatarUploader function would look like this:

function initializeAvatarUploader() {
  const upload = document.getElementById('avatar-upload');
  new FileUpload(upload);

I also created a snippet that mimics your asynchronous call that will init FileUpload 2s after window load:

jcrowell priority answered 1 year ago

File Upload Element

<div id="dnd" class="file-upload-wrapper" style="width: 200px; height: 200px;">
            data-default-msg="Upload your avatar"
            data-main-error="Ooops, that didn't work"
            data-format-error="Bad file format (please choose only image formats)"

Ajax Link

data-request-update="'Class::phpUpdateFunction': '#container-div'"
><i class="fas fa-user-edit"></i> Edit</a>


function initializeAvatarUploader() {

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
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes