Topic: MDB FIle upload not rendering properly
*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.)
<!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>
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.
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
Hi,
are you using MDB Pro Advanced or MDB Pro Essential package?
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: MDB5 4.2.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No