Topic: MDB FIle upload not rendering properly

chrislennon priority asked 2 years ago

*Expected behavior*The file upload control would render as per the docs

*Actual behavior*It renders with no styling, i.e. no drag and drop ability

Resources (screenshots, code snippets etc.)Screenshot

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Mdb File upload bug</title>

    <link rel="stylesheet" href="css/mdb.min.css" />

    <script type="text/javascript" src="js/mdb.min.js"></script>



<div id="dnd" class="file-upload-wrapper">
    data-mdb-main-error="Ooops, error here"
    data-mdb-format-error="Bad file format (correct format ~~~)"


Mateusz Lazaru staff answered 2 years ago

Do you have 'plugins' folder inside your project's main folder? Are you using MDB index.html starter file?

Check this plugin installation guide.

For some reason i can't see those lines in your code, which is neccesary to use any plugin:

<link rel="stylesheet" href="plugins/css/all.min.css" />
<script type="text/javascript" src="plugins/js/all.min.js"></script>

It's usually caused by installing free package instead of PRO, or not using our starter file, and forget to import those.

chrislennon priority answered 2 years ago

Thank you - yes I was missing the plugins css and js

As an aside I had to move the javascript references out of the head and into the body

As another aside for anyone reading this I found this stack overflow post helpful when it comes to getting the contents of the file (e.g. to upload to a server) - scroll down to the answer from endelss

Mateusz Lazaru staff answered 2 years ago


are you using MDB Pro Advanced or MDB Pro Essential package?

chrislennon priority commented 2 years ago

Hi @mlazaru I am using MDB Pro Advanced

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.2.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No