In this tutorial we are going to learn using DropzoneJs library to upload files to the server by simply dragging and dropping with image previews. DropzoneJs is a fantastic lightweight, open source JavaScript library that does not rely on only JQuery. File uploading with Dropzone.js is super easy.
On the front end or client side we will use DropzoneJs to upload multiple files through a form and then at the back-end PHP will be used to handle the uploaded files.
This year, three web trends have taken on some major popularity. The main reason why there are trends on the web is to advance the web. As we go further into the future… Read More
You may use any IDE (integrated development environment) or text editor like notepad++ for coding. We use sublime text.
File Uploading – Step By Step Guide
Step 1
Before actually starting the coding, you need to download the following files
- Download DropzoneJS from this URL
- Download dropzone.css from this URL, if you like some ready made css.
- Create a folder for uploads, for example “profiles”
- Create a file “index.php”, for the upload form.
- Create a file “process.php”, for handling back-end file upload process.
Your folder & file structure should look like this after the 1st step:
Step 2.
Open Index.php and copy the following code into it
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Dropzone Multiple File Upload Tutorial</title> <link href="css/dropzone.css" type="text/css" rel="stylesheet" /> </head> <body> <h2 align="center"> Multiple Files Upload </h2> <form action="process.php" class="dropzone"></form> </body> <script src="dropzone.js"></script> </html>We included dropzone.css file in the head section and created a form with the class “dropzone”, that do the real magic and in action we name the php file that will process the uploaded files. Please note we do not included any file input control or anctype in form tag, the dropzone.js will handle all this automatically by recognizing the class in form tag. At the end, after closing body tag, we added dropzone.js file.
Now if you open index.php with your browser, it will look like the screen below
We haven’t done yet, we need to add php code in process.php to handle the uploaded file(s)
Step 3.
Open process.php and insert the following code into it
<?php $ds = DIRECTORY_SEPARATOR; $uploadFolder = '/profiles'; if (!empty($_FILES)) { $tempFileName = $_FILES['file']['tmp_name']; $destPath = dirname( __FILE__ ) . $ds. $uploadFolder . $ds; $destFile = $destPath. $_FILES['file']['name']; move_uploaded_file($tempFileName,$destFile); } ?>We create a directory separator variable, define the destination folder, check if $_FILES has some files, define a temp file name, destination path and destination file name. In last line of code, we actually move the file to the destination folder on server.
Open the index.php file again with browser and try dragging and dropping some files, it should be working perfectly.
Step 4. Confirmation
Open your profiles folder, and you will see the uploaded files. Be carefull when you are uploading files with similar file names, it will overwrite the old files on the server. To prevent it from happening, give random name to your uploaded files.
Other Search Terms to Find this Page: drag and drop file upload php mysql, dropzone css, dropzone example demo, dropzone example jsfiddle, dropzone example php, dropzone jquery example, dropzone js bootstrap, dropzone js tutorial, dropzone maxfilesize, DropzoneJs, DropzoneJs Complete Guide, file upload in php example code demo, how to upload multiple files in php, image upload in php code, move_uploaded_file in php, multiple file upload in php, multiple file upload in php demo, multiple file upload in php using ajax multiple file upload html, multiple image upload in php, multiple image upload in php example, php file upload script, php multiple file upload, php upload multiple images,