Topic: File Upload not working

emailoversight priority asked 1 year 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 1 year ago

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


emailoversight priority commented 1 year 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 1 year ago

Hello, I cannot see the code.


Hyde pro commented 1 year 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">
</div>

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 1 year 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 1 year 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 1 year 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 1 year 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 contact@mdbootstrap.com

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

Keep coding,

Adam From MDB


Hyde pro answered 1 year 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 1 year ago


Thanks Michał,

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


Hyde pro commented 1 year ago

Can you please respond...


Michał Duszak staff commented 1 year ago

Have you actually bought a package which contains plugins? https://mdbootstrap.com/docs/standard/pro/#section-pricing


Michał Duszak staff commented 1 year ago

You can check it in your orders https://mdbootstrap.com/profile/my-orders/


Michał Duszak staff answered 1 year 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">
      <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.

enter image description here


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: 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