1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Installing and testing Drag and drop plugin.

rt133813 pro asked 6 years ago

Purchased unlimited PRO and realized it didn't have the drag and drop feature, so I then purchased the unlimited dad plug-in. So now I have two different extraction directories or am I suppose to extract the new plug-in over the top of the PRO installation?  Irregardless, it's not working for me.  What I am confused about is even the

Default Bootstrap file input

Upload
Upload button does not work.  The browse button works, but when you select an image, it does not drop the image in the page, so there is my first problen.  Then all the other features test fine except I don't understand how to actually upload the selected image.  There is no upload button, only delete.  Prior to Downloading.  The script I used before purchasing MDB Pro to upload images.
<form style="color:blue;float:center;text-align:center;" action="img_upload_script.php" method="post" enctype="multipart/form-data">
<input size="150" style="width:100%;float:center" type="file" accept="image/*" onchange="preview_image(event)" name="fileToUpload" placeholder="download">
<button type="submit" type="submit">Upload Image&nbsp<i style="font-size:24px" class="fa">&#xf093;</i></button>
How do I merge/integrate the above code with MDB.  My website currently uploads images just fine, but I want to use your plug-in instead as it looks much more professional.  Also I am just a self taught individual, working all by myself.  I can look at most code/script and decifer it, but I am a bit confused on this one.  I am looking forward to getting this working, MDB Pro in general is something I just ran across, and couldn't believe my eyes, how awesome.  Things I have been re-inventing the wheel, you folks already have written.  Wish I would have understood/ran access your product a couple of years ago.  But how do you ask what you don't even know how to ask, meaning, as a individual web coder, I just learned command line coding with sites like w3schools.  I didn't understand what a frame work was, like MDB.  Going forward I will be using MDB in all my new pages, and will eventually convert most of my existing pages to MDB.  So please help
My Demo Drag And Drop

Anna Morawska staff answered 6 years ago

Hi rt133813, If I understand you correctly, your plugin works like on file upload page, right? It looks and behaves just like the presented one. Your problem is that you can't send the file to your PHP script, am I right?  If so, please wrap your input in <form> element and add sumbit button for as shown bellow. Please let me know if this resolves your problem. Best, Ania 
<form action="img_upload_script.php" method="post"  enctype="multipart/form-data">
  <input type="file" id="input-file-max-fs" class="mdb_upload" data-max-file-size="2M" />
  <button class="btn btn-sm btn-success btn-submit"><i class="fa fa-upload mr-1"></i>Upload</button>
</form>

rt133813 pro commented 6 years ago

Thank you Anna, that did the trick, I should have known that, but I had tunnel vision thinking your java script was handling that.

Anna Morawska staff commented 6 years ago

No problem, it happens to all of us :) Happy coding!

Marta Wierzbicka staff answered 6 years ago

Hi, Have you seen our video tutorial about this: https://mdbootstrap.com/plugins/jquery/file-upload/? You can see it in "Getting started" tab. Best, Marta

rt133813 pro commented 6 years ago

Thanks Marta, and yes I did, and I watched it again.  But still does same thing.  The upload button is not active on the very first example.  And there is no upload button on the images I drag in, only delete.  Other than that the plug-in looks great! When I purchased this plug in, I thought it would have some sort of a upload button for the drag and drop image field, hence the name of the plugin "HTML5 Image upload with drag".  Did you checkout my link above? is that the way its suppose to work and am I just not skilled enough to figure this out?  I do struggle with JS and Jquery, but I can usually figure it out with the proper guidance.  Thanks again.  
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: all
  • Browser: all
  • OS: Linux hosted by Godaddy.com
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
rt133813
Pro User 79Support score
7Questions 3Answers 0Snippets