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.
- Receive upload file data using PHP $_FILES method.
- Upload files to the Server using move_uploaded_file function in PHP.
- 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.