Topic: Drag and Drop addon not working
I purchased the Drag and Drop plugin. By the way, on (https://mdbootstrap.com/plugins/jquery/file-upload/), on the Getting Started page, it says that the cost is $9. But when I go to the page to purchase it says that it's $15 dollars. Wasn't happy about that....
Per the not very helpful video tutorial I installed Drag and Drop. The plugin loads and there are no errors in the console. However, when I load the page with the drag and drop, it looks like this:
I can't drag anything onto it or click it and it's useless.
It would help if you had a textual tutorial and detailed styling and such.
Here's the code for that particular part of the site:
<input type="file" id="car_image" name="car_image" class="mdb_upload" data-height="75" />
I'd like to get this working as it's really the only drag and drop that looks good. Otherwise I'd just like a refund.
Add comment
By the way I called the mdbFileupload.js in the HEAD section as I couldn't even get the initialization $('.mdb_upload').mdb_upload(); to initialize otherwise. There was an error in the console saying mdb_upload is not a function.
Hi, petrakid,
Fileupload plugin was designed to work with MDB Free version. It looks like you are using pro version, so you need to make some adjustments. You have to add js and css files to your project. As I've noticed, you already imported javascript. Now, please add css rules. The most straightforward way is to copy CSS rules from jq-fileupload/css/addons/_mdbFileupload.scss file to your custom CSS file in your project, append all classes with .fileupload-wrapper class e.g
.fileupload-wrapper .mdb-upload and wrap your input in <div class="fileupload-wrapper">. You can also do it faster using scss files if you are familiar with it. I can help you with it, my email a.morawska@mdbootstrap.com
2. Referring to your second comment, yes, you have to initialize $('.mdb_upload').mdb_upload(); at the end of the body section, after the script pointing to jQuery library. mdb_fileupload uses under the hood jQuery, so your browser at the beginning has to load jQuery to understand your plugin. It's because of how javascript works.
If you have any further question, please ask here.
Best,
Ania
Status
Answered
Specification of the issue
- User: Pro
- Premium support: Yes
- Technology: jQuery
- MDB Version: 4.5.10
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Tags
Related topics