Drag & Drop - Image and File Uploader

Drag & Drop - Uploader Plugin

Thank you for Browsing our website. If you have any questions that are beyond the scope of this help file please feel free to contact with us at Hi-Tech Parks. Thanks again for Browsing our website!


Drag & Drop - Image and File Uploader Features:

  1. Drag & Drop Upload.
  2. Upload Single Files.
  3. Profile Image Uploader.
  4. Live Image Uploader.
  5. File Uploader.
  6. Image Preview.
  7. Upload Progress.
  8. 3 Uploader Layouts.
  9. Fully Responsive.
  10. Cross-Browser Compatibility.
  11. Uses Font Awesome Icon.
  12. Easy to Customize.
  13. Easy to Setup.
  14. Step by Step Documentation.
  15. And Much More!

Browser compatibility:


Drag & Drop - Image and File Uploader will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.


Installation Drag & Drop - Image and File Uploader

Please follow all the steps carefully...

  • Step 1: Download the Zip file which you have purchased.
  • Step 2: Extract the zip file.
  • Step 3: Copy all plugin CSS, JS and fonts files (you can find that's inside of customs and externals folders inside of assets), and paste it your own website css, js and fonts folder.
  • Step 4: Link all plugin css file in your own web page head section and js file in your own web page before end of the body section (whose template page you want to add this Uploader).

  • -----

  • Step 5: Choice your Uploader template .html file, whose Layout you wont to use.
  • Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).
  • Step 7: Copy the File/Image Uploader code from uploader template and paste it where you need to show this in your website template body.
    (That's commented inside of the template you can find it easily.)

  • Step 8: Save your own website template. It's done!

Note: After setup check your template, If your design broken then please rename or delete your plugin css class, whose class was broken your design.


If you wont to customize this Uploader Content text , Area size or etcetera then flow this instruction carefully...

  • Step 01 - Change Uploader Title: If you need to change the uploader title then you have to just edit this uploader html page then replace the title content inside the uploader html code!! Do it very simply.

  • Step 02 - Change Uploader Width: If you need to change the uploader width in various size of screen device then you have to just use bootstrap column class for make it perfact!! Do it very simply, like as use class="col-md-4" for 4 column in medium size screen device and class="col-xm-12" for 12 column in extra small size screen device.
    (you can use one or multiple class inside a single uploader item)

  • Step 03 - Change Uploader Color: If you need to change the uploader color then you have to just eidt uploader.css css file. Edit this css file in notepad and change css color/background/border property values!! Do it very simply, like as use color:#fff; for white color text and background:#fff; for white background and border-color:#fff; for white border color.

  • Step 04: Now save it. Let's go It's ready to use!

How To Use

01. Click here to select a File or Image

02. Press this button for upload selected File or Image


Drag & Drop - Image and File Uploader v1.0.0

Version 1.0.0 – 08 Aug 2017
- Initial release.


With browsing Drag & Drop - Image and File Uploader you will get first class support! Please feel free to contact with us by email at any time if you run into problems.

Email Us: hitechparks@gmail.com

You need to confirm your purchase from codecanyon.net to get any support.


Credit Goes to...

  1. Bootstrap
  2. Font Awesome
  3. jQuary