Drag and Drop upload file using Dropzone JS with PHP & Mysqli

Drag and drop is a very effective function for creating user friendly web applications. In general, this feature allows you to drag items and drop them elsewhere on the web page. The drag and drop function can be used in web applications for various purposes. If you want to make the file upload feature more interactive, then drag and drop is the best option.

DropzoneJS is an open source JavaScript library that can be used to download HTML elements. This means that the user can drag files from the computer and drop them into this HTML element. DropzoneJS offers an easy way to integrate the upload of multiple preview files into the web application using drag and drop. Dropzone is lightweight and doesn’t depend on other jQuery libraries.

DropzoneJS does not take the function of uploading files, but sends files to the server via AJAX. You need to use PHP to upload files to the server. In this tutorial, we will show you how to integrate drag-and-drop file upload with DropzoneJS and PHP.

The sample code allows you to upload multiple images or files to the server without refreshing the page using Dropzone and PHP. The following steps are taken to implement the drag and drop file upload feature.

See Also

Create Database Table

The database is required in the database to store uploaded file details. The following SQL generates a table with some basic fields in a MySQL database.

Create Database Configuration

Create File (index.php) to Drag and Drop Files Upload

Dropzone JS library is used to integrate drag and drop functions. So, include the Dropzone JS library and the CSS library first.

Create File (upload.php) to Upload Files to the Server using AJAX with PHP Mysql

Dropzone sends all dropped files to the server using the Ajax file (upload.php) to process the upload process.

  1. Receive upload file data using PHP $_FILES method.
  2. Upload files to the Server using move_uploaded_file function in PHP.
  3. Insert the uploaded file to the Database table

Drag and Drop upload file using Dropzone JS with PHP & Mysqli

Originally published at https://www.webscodex.com on December 26, 2020.



Webs Codex is programming and web development blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store