MDB FIle upload not rendering properly


Topic: MDB FIle upload not rendering properly

chrislennon pro premium 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">

<head>
    <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>

</head>

<body>

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

</html>

mlazaru 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 pro premium 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


mlazaru staff answered 2 years ago

Hi,

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


chrislennon pro premium priority commented 2 years ago

Hi @mlazaru I am using MDB Pro Advanced


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: MDB5 4.2.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No