Are you looking for a creative drag and drop file upload or image uploading. In this tutorial post, I want to show you how to make a drag and drop file upload using php and dropzonejs. I hope it’s useful for your social media web projects and applications, just check out the demo link below.
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.
STEP 1: Create Database “Projects“.
To store file information, create a table “drag_drop_files” into the database for storing uploaded file name.
[code]CREATE TABLE `drag_drop_files` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`uploaded` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;[/code]
STEP 2:
Download Dropzone library files dropzone.js and dropzone.css. You need two Dropzone library files dropzone.js and dropzone.css. You can download these two files from DropzoneJS site.
Step 3 :
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.
Step 4 :
Copy below HTML code Index.html
[code]<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!– Add Dropzone –>
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fdropzone.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<h1>Drag And Drop : Multiple Files Upload using DropzoneJS and PHP. By Meul Tech </h1>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</body>
</html>[/code]
Step 5 : To upload files to folder (uploads/) and inserting file information to database, copy below PHP code to upload.php file.
[code]<?php if(!empty($_FILES)){ //database configuration $dbHost = ‘localhost’; $dbUsername = ‘root’; $dbPassword = ”; $dbName = ‘projects’; //connect with the database $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES[‘file’][‘name’];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES[‘file’][‘tmp_name’],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO drag_drop_files (file_name, uploaded) VALUES(‘".$fileName."’,’".date("Y-m-d H:i:s")."’)");
}
}
?>[/code]
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Shrinking Navbar Resize When Scrolling Down – Jquery Tutorial
- Online Election System Project In PHP
- Multiple Select DropDown List Tutorial in PHP and Jquery
- Auto-Complete Email Address Form Using Jquery Plugin
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.
and many more.