Topic: File Upload not working
Trying to implement file upload through drag n drop but not working. it behaves like a normal input type="file" element. Look and feel are totally different from the component page.
@Hyde I just implemented it in my 3.9.0 project. Please repeat after me, as this is working for me.
1) Move file-upload.min.css and file-upload.min.js into your project directory.
2) Link a stylesheet and a script for the plugin. (your paths may differ)
<link rel="stylesheet" href="src/css/file-upload.min.css" />
<script type="text/javascript" src="src/js/file-upload.min.js"></script>
3) Append HTML from the documentation.
<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>
4) If it's not initialized, you need to initialize via JS.
<script type="text/javascript">
const fileUploadEl = document.querySelector('#file-upload');
const fileUploadInstance = new FileUpload(fileUploadEl);
</script>
5) Nice and smooth drag and drop plugin.
Thanks Michał,
Where do I download file-upload.min.css and file-upload.min.js from?
Hyde pro commented 3 years ago
Can you please respond...
Michał Duszak staff commented 3 years ago
Have you actually bought a package which contains plugins? https://mdbootstrap.com/docs/standard/pro/#section-pricing
Michał Duszak staff commented 3 years ago
You can check it in your orders https://mdbootstrap.com/profile/my-orders/
Thanks...but where is the option to purchase plugins provided?...there is no mention of a a file upload plugin being required in the PRO docs??? We were under the impression that we purchased all the functionality in the V5 PRO docs (that we see after logging in)...we are also starting to get a bit annoyed here in relation to the lack of clear documentation and the time that tends to gets wasted implementing your product (BTW this doesn't just seem to be our view based on other forum comments we have read).
Hello @Hyde,
The support forum is dedicated to technical questions.
All questions regarding MDB licensing, products, partnerships, and other non-technical queries - it should be asked directly to contact@mdbootstrap.com
I've reached out to you via the email address assigned to your mdbootstrap account.
Keep coding,
Adam From MDB
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Michał Duszak staff commented 3 years ago
Could you reproduce this issue in a snippet? Have you properly loaded plugin files into your project?
emailoversight pro premium priority commented 3 years ago
I am loading MDB PRO 3.9.0 js file.And having this code:
However it just shows the default input file component.
Michał Duszak staff commented 3 years ago
Hello, I cannot see the code.
Hyde pro commented 3 years ago
I have exactly the same problem, plugins are loaded as required and work for all other components used so far.
The file upload component HTML used is:
But all that is displayed is a the standard HTML input type="file"
I have also seen examples that require dnd-file-upload.min.js.
When I load this file, I get the upload file component cloud logo and text, but still just the standard file input HTML element.
Is there an example of how to actually implement this component anywhere?
Michał Duszak staff commented 3 years ago
@Hyde you would like this one https://mdbootstrap.com/docs/standard/forms/file/ or the drag and drop file upload https://mdbootstrap.com/docs/standard/plugins/file-upload/ ? Both of them are described in the docs in the links I have just provided. If you want the first one, you have to give your input a class="form-control". Second of all data-file- upload="file-upload" won't work I guess. You can try data-mdb-data-file-upload="file-upload" instead.
Hyde pro commented 3 years ago
Thanks, but I cant get the drop and drag version to work. With PRO 3.9 properly installed, I still just get the standard HTML file upload (Browse button, "No file selected."). Used following HTML:
Is there any other HTML required (form tags?).
I also noted that the working snippet for the above code from https://mdbootstrap.com/docs/standard/plugins/file-upload/ uses V3.8.1 NOT 3.9.
HAS ANYONE EVER GOT THIS COMPONENT TO WORK - IT HAS WASTED A LOT OF MY TIME AND SOME OF MY MONEY TO THIS POINT...
Hyde pro commented 3 years ago
My code doesn't display, but is the basic version for the link provided. That snippet has "data-mdb-file-upload="file-upload"", but I also tried "data-mdb-data-file-upload="file-upload" " and that didn't work either...