Example – Drag and drop file upload in PHP using DropzoneJS

4

If you want to implement drag and drop files upload in your PHP project, then this tutorial will help a lot. You can implement drag and drop images or files upload within 5 minutes with our tutorial.

Using DropzoneJS and PHP we can easily implement the drag and drop file upload in our web application. DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery). DropzoneJS does not handle files uplod to the server. So, we will use PHP for upload the files on server and MySQL for insert the file information at the database.

You need two Dropzone library files dropzone.js and dropzone.css. You can download these two files from DropzoneJS site. Also you can get these files into our downloadable package.

Create js/ folder and insert the dropzone.js file into it.
Create css/ folder and insert the dropzone.css file into it.
Create uploads/ folder for store the uploaded files.
Create index.html file for front form page.
Create upload.php file for handling server-side file upload and store file information into the database.

Now the folders and files structure would look like following.

  • js/
    • dropzone.js
  • css/
    • dropzone.css
  • uploads/
  • index.html
  • upload.php

Database Table Creation:

If you want to store file information, create a table into the database. For testing we have created a files table for storing uploaded file name.

index.html:

Include the Dropzone libraries.

You need only form opening and closing tags without any form elements. Into <form> tag need action and class attributes. action attribute defines the action to be perform server-side upload. dropzone class is identifier of the Dropzone library.

upload.php:

This file is used for server-side upload and inserting the file information into the database.

 

Leave A Reply

Your email address will not be published.