Drag and drop<\/b> is a very effective feature to make the web application user-friendly. Generally, this feature allows you to drag and drop an element to a different location on the web page. The drag-and-drop feature can be used for various purposes in the web application. If you want to make file upload functionality more interactive, drag & drop is the best option.<\/p>\n
DropzoneJS<\/b> is an open-source JavaScript library that enables an HTML element dropable. This means the user can drag files from the computer and drop them into this HTML element. DropzoneJS provides an easy way to integrate drag and drop multiple file uploads with a preview in the web application. Dropzone is light-weight and does not depend on any other jQuery library.<\/p>\n
DropzoneJS does not handle the file upload functionality, it sends the 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 using DropzoneJS and PHP<\/b>.<\/p>\n
The example code helps you to upload multiple images or files to the server without page refresh using Dropzone and PHP. The following steps will be followed to implement the drag & drop file upload<\/b> functionality.<\/p>\n Before getting started, take a look at the file structure of drag & drop file upload with PHP<\/b>.<\/p>\n To store the information of the uploaded file a table is required in the database. The following SQL creates a The The DropzoneJS library will be used to integrate Drag&Drop feature, so, include the Dropzone JS and CSS library first.<\/p>\n Create a form element with class Dropzone sends the dropped files to the server-side script ( If you want to display the uploaded files on the web page, you need to fetch the file names from the database and retrieve the respective files from the server.<\/p>\n\n
drag_drop_file_upload_with_php\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 upload.php\r\n\u251c\u2500\u2500 uploads\/<\/span>\r\n\u2514\u2500\u2500 js\/<\/span>\r\n \u251c\u2500\u2500 dropzone.min.js\r\n \u2514\u2500\u2500 dropzone.min.css\r\n<\/pre>\nCreate Database Table<\/h2>\n
files<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `files`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `file_name`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `uploaded_on`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
dbConfig.php<\/code> file is used to connect and select the database. Specify the database hostname ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\nDrag and Drop File Upload (index.html)<\/h2>\n
<script<\/span> src<\/span>=\"js\/dropzone\/dropzone.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n<link<\/span> href<\/span>=\"js\/dropzone\/dropzone.min.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> \/><\/span><\/pre>\ndropzone<\/code>. Dropzone will attach automatically to this form element and the dropped files data will be posted to the server-side script (specified action URL) for upload.<\/p>\n\n
<form<\/span> action<\/span>=\"upload.php\"<\/span> class<\/span>=\"dropzone\"<\/span>><\/span><\/form<\/span>><\/span><\/pre>\nUpload Files to the Server (upload.php)<\/h2>\n
upload.php<\/code>) to handle the upload process.<\/p>\n\n
<?php
<\/span>if(!empty(<\/span>$_FILES<\/span>)){
<\/span>\/\/ Include the database configuration file
<\/span>require <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ File path configuration
<\/span>$uploadDir <\/span>= <\/span>\"uploads\/\"<\/span>;
<\/span>$fileName <\/span>= <\/span>basename<\/span>(<\/span>$_FILES<\/span>[<\/span>'file'<\/span>][<\/span>'name'<\/span>]);
<\/span>$uploadFilePath <\/span>= <\/span>$uploadDir<\/span>.<\/span>$fileName<\/span>;
<\/span>\/\/ Upload file to server
<\/span>if(<\/span>move_uploaded_file<\/span>(<\/span>$_FILES<\/span>[<\/span>'file'<\/span>][<\/span>'tmp_name'<\/span>], <\/span>$uploadFilePath<\/span>)){
<\/span>\/\/ Insert file information in the database
<\/span>$insert <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"INSERT INTO files (file_name, uploaded_on) VALUES ('\"<\/span>.<\/span>$fileName<\/span>.<\/span>\"', NOW())\"<\/span>);
}
}
<\/span>?><\/span><\/pre>\nDisplay Uploaded Files<\/h2>\n
\n
<?php
<\/span>\/\/ Include the database configuration file
<\/span>require <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Get files from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM files ORDER BY id DESC\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){
<\/span>$filePath <\/span>= <\/span>'uploads\/'<\/span>.<\/span>$row<\/span>[<\/span>\"file_name\"<\/span>];
<\/span>$fileMime <\/span>= <\/span>mime_content_type<\/span>(<\/span>$filePath<\/span>);
<\/span>?>
<\/span> <embed<\/span> src<\/span>=\"<?php <\/span>echo <\/span>$filePath<\/span>; <\/span>?><\/span>\"<\/span> type<\/span>=\"<?php <\/span>echo <\/span>$fileMime<\/span>; <\/span>?><\/span>\"<\/span> width<\/span>=\"350px\"<\/span> height<\/span>=\"240px\"<\/span> \/><\/span><\/span>
<?php <\/span>}