File Upload not working

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">
</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?

Please insert min. 15 characters.

Michał Duszak staff commented 2 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.

Please insert min. 15 characters.

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

Please insert min. 15 characters.

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

Add comment

Adam Jakubowski staff answered 2 years ago

0 0 Best answer

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

Add comment

Hyde pro answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Hyde pro answered 2 years ago

0 0 Best answer

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? https://mdbootstrap.com/docs/standard/pro/#section-pricing

Michał Duszak staff commented 2 years ago

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

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

<p><a href="/profile/?id=235533" target="_blank" rel="nofollow">@Hyde</a> I just implemented it in my 3.9.0 project. Please repeat after me, as this is working for me.</p>

<p>1) Move <code>file-upload.min.css</code> and <code>file-upload.min.js</code> into your project directory.</p>

<p>2) Link a stylesheet and a script for the plugin. (your paths may differ)</p>

<p>3) Append HTML from the documentation.</p>

<p>4) If it's not initialized, you need to initialize via JS.</p>

<pre class="prettyprint"><code><script type="text/javascript">
  const fileUploadEl = document.querySelector('#file-upload');
  const fileUploadInstance = new FileUpload(fileUploadEl);
</script>
</code></pre>

<p>5) Nice and smooth drag and drop plugin.</p>

Please insert min. 20 characters.

@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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

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

emailoversight

95Support score
10Questions 4Answers 0Snippets