Topic: MDB 5 Pro Plugin components - File upload not loading
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
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
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();
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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?