MDB 5 Pro Plugin components - File upload not loading

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

jcrowell priority asked 3 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 3 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 priority commented 3 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?

Add comment

Marcin Luczak staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

jcrowell priority answered 3 years ago

0 0 Best answer

<h2>File Upload Element</h2>

<h2>jQuery</h2>

<pre class="prettyprint"><code>function initializeAvatarUploader() {
    $('#avatar-upload').fileUpload();
}
</code></pre>

Please insert min. 20 characters.

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();
}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

jcrowell

15Support score
1Questions 1Answers 0Snippets