Topic: File Upload not working

emailoversight priority asked 2 years ago

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.

Michał Duszak staff commented 2 years ago

Could you reproduce this issue in a snippet? Have you properly loaded plugin files into your project?

emailoversight priority commented 2 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 2 years ago

Hello, I cannot see the code.

Hyde pro commented 2 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:

<div class="file-upload-wrapper">
    <input type="file" id="input-file-now" class="file-upload-input" data-file- upload="file-upload">

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 2 years ago

@Hyde you would like this one or the drag and drop 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 2 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 uses V3.8.1 NOT 3.9.


Hyde pro commented 2 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...

Adam Jakubowski staff answered 2 years ago

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

I've reached out to you via the email address assigned to your mdbootstrap account.

Keep coding,

Adam From MDB

Hyde pro answered 2 years ago

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).

Hyde pro answered 2 years ago

Thanks Michał,

Where do I download file-upload.min.css and file-upload.min.js from?

Hyde pro commented 2 years ago

Can you please respond...

Michał Duszak staff commented 2 years ago

Have you actually bought a package which contains plugins?

Michał Duszak staff commented 2 years ago

You can check it in your orders

Michał Duszak staff answered 2 years ago

@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">
        data-mdb-main-error="Ooops, error here"
        data-mdb-format-error="Bad file format (correct format ~~~)"

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);

5) Nice and smooth drag and drop plugin.

enter image description here


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 3.9.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No