MDB 5 Pro Plugin components - File upload not loading


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

jcrowell pro premium priority asked 4 years ago

Using any of the instructions from https://mdbootstrap.com/docs/standard/plugins/file-upload/, 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 4 years 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. https://mdbootstrap.com/snippets/standard/marcin-luczak/2554152?action=forum_snippet#html-tab-view

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


jcrowell pro premium priority commented 4 years 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 4 years 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:

https://mdbootstrap.com/snippets/standard/marcin-luczak/2557680#js-tab-view


jcrowell pro premium priority answered 4 years ago

File Upload Element

<div id="dnd" class="file-upload-wrapper" style="width: 200px; height: 200px;">
        <input
            id="avatar-upload"
            type="file"
            name="avatar"
            data-file-upload="file-upload"
            class="file-upload-input"
            data-height="200"
            data-default-msg="Upload your avatar"
            data-main-error="Ooops, that didn't work"
            data-disabled-remove-btn="true"
            data-accepted-extensions="image/*"
            data-format-error="Bad file format (please choose only image formats)"
            required
        />
    </div>    

Ajax Link

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

jQuery

function initializeAvatarUploader() {
    $('#avatar-upload').fileUpload();
}

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: 1.0.0
  • Device: PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes