Image uploading is one of the most common features every website owner would love to have in their website. I have also posted the script to upload images in PHP and its enhanced version. Users must be able to upload multiple image files easily. I just came to know about a wonderful js library dropzone.js. You can use it with php and create easy-to-use multiple file uploader in minutes. In this tutorial I will show you how to do that. We will allow users to add multiple images just by dragging it in into our file uploader page.
This tutorial requires dropzone.js you can download it from its official website (Everything is well explained). I have used dropzone.js version 3.0 (latest till date) in this tutorial.
[button_round color=”blue” url=”infotuts.com/demo/multiple-file-upload/”] LIVE DEMO [/button_round] [button_round color=”blue” url=”infotuts.com/demo/multiple-file-upload/download.html”] DOWNLOAD [/button_round]
Now let’s start our tutorial, we have just two mail files here index.html and file-upload.php. index.html file is a simple file which contains call to dropzone.js and css file then it has code to show up the simple form. File-upload.php handles rest of the part, it uploads images to specified directory in server.
Note: I have used style sheet given by dropzone, you can download the zip file from here. But I have uploaded the minimal files required for this tutorial so you can download that too.
You just need a form in index.html, here is the main code:
</p> <body> <form action="file-upload.php" class="dropzone"></form> </body> <p style="text-align: justify;">
Code for file-upload.php:
</p>
<?php
$upload_dir = 'myuploads';
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
// using DIRECTORY_SEPARATOR constant is a good practice, it makes your code portable.
$targetPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;
// Adding timestamp with image's name so that files with same name can be uploaded easily.
$mainFile = $targetPath.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tempFile,$mainFile);
}
?>
<p style="text-align: justify;">
Its really easy to implement this tutorial, and it will hardly take your 10 minutes. We can expect a lot more from future versions of dropzone.js. Still there’s a lot that should be done like giving option to delete files after upload etc. Share this simple tutorial with your friends, I hope it will help them too.
Note: You should use restriction on the type of file to be uploaded on server. Based on your need allow only files of particular type to be uploaded.
Comments
107 responses to “Create Drag and Drop Multiple File Upload using PHP and Dropzone.js”
Hi!, big thanks! This tute is very helpfull. Just a little question. How could you store the images name in a MySQL database?
hi i have subscribed but can’t download my email was confirm what else should i do ?
HOw to download it ?
I have updated your email now you can download it.
Hi,
I have subscribe to feedburner. Would you be able to email me?
Regards,
Terence Leong
I’m not able to download this file
it is not true
i cant download your code 🙁
Hi Jonathan,
You can download the code now. Sorry for the inconvenience.
thank you 🙂 it’s okay
i cant download it again. will you please activate my email again?
Hi jonathan,
Please subscribe, you can subscribe for free in download page.
Thank you 🙂 can i use this for uploading photos in database?
Hi Jonathan,
You can use this script to upload your images in a directory in your server. Add few lines of PHP code which will store path of image files in database. Remember to put restriction (by file type) so that this code will allow only images to be uploaded on server, by default it allows all type of files so your users can upload any malicious file.
Regards:
Sanjeev
Hi thx for this tut!
But i couldn’t download it… i activated my mail, but…
You can download now.
Hi thank you. That helps me a lot. Sorry my bad english- I’m from Germany 😉
I have one problem, maybe you can help me.
In the “file-upload.php” you are writing :
“// Adding timestamp with image’s name so that files with same name can be uploaded easily.”
But I need that without the timestamp and I don`t know how.
Can you help me, please?
Hi Lukas,
Change this line
$mainFile = $targetPath.time().’-‘. $_FILES[‘file’][‘name’];
to
$mainFile = $_FILES[‘file’][‘name’];
Hi!, big thanks! This tute is very helpfull. Just a little question. How could you store the images name in a MySQL database? Could you give an example? Because I tried unsuccessfully to do…
Hi Miguel,
You can simply store filename with path in your MySQL database like this
$image_path = “UPLOAD_DIRECTORY_PATH”.$_FILES[“file”][“name”]; (replace ‘UPLOAD_DIRECTORY_PATH’ with actual path)
Then store $image_path in MySQL database just like you store any other variable.
Thanks!!! Finally it works!!!
i upload multiple file and i want to store that all file name in one coloumn in database. when i insert filename in database ,if i upload two file then they insert in different coloumn.solve please,i know i m doing silly mistake but i m not cathing that.
Hi Rahul,
Please send your code to sanjeev00733@gmail.com. I would try to fix your issue asap.
hi sanjeev, thank u so much for the plugin bcoz whenever i went to the website of DROPJONE.I got confused and not able to configure my script but u make me understand very well in easy way.
Your welcome Sachin 🙂
i am not able to download files..
Now you can download 🙂
Hi sanjeev,
thanks for your answer! but its not working. you wrote me, that I have to:
Change this line
$mainFile = $targetPath.time().’-’. $_FILES[‘file’][‘name’];
to
$mainFile = $_FILES[‘file’][‘name’];
when I change this, the file don`t load up.
tanks!
Lukas
please correct it to $mainFile = $targetPath. $_FILES[‘file’][‘name’];
great!!! thank you so much!
greats from germany!
hello sir,
thanks for this tut!
But i couldn’t download it… i activated my mail, but… 🙁
Hello Sanjeev sir,
can i use this coding in my website?
Hello Sanjeev sir,
i have two question reply please
1)when i upload file its working good. but when i am uploading heavy file it show file upload in front but file is not upload in myupload folder?
Hi, Check maximum upload size allowed in your server.
yes i checked its maxi. 8 mb so i want if file size is more then 8mb then it stop upload and show an error. is it possible?
sir one thing is more i am using this code twice in my single html page. i means i have two form and both form upload there file in single folder. is it possible that both form upload file in separate folder.?
http://www.codetrip.info/codetrip/131/PHP/How-to-upload-multiple-file-in-php
How to upload multiple file in php Open Above Link And Check
Hello Sanjeev,
It,s good work. but if any user upload wrong file then there should be option for remove file. is it possible with is plugin?
myDropzone.on(“complete”, function(file) {
myDropzone.removeFile(file);
});
i localhost file upload is working fine. but, when i put this code on host then it is not upload .php file.??
could you tell me how i can use the file restriction?????????????????
I have subscribed to using this email , but I am not able to download it…
please help me out here, and how will I able to get the multiple image names and save it in the database….
Thanks….
Hello..
i couldn’t download the file.. i am already subscribed
Please download your code now 🙂
Thanku so much…
sir i have subscribed but not downloading could you please speed up the process
Hi,
You can download now 🙂
Hi I already subscribe but still cant download it, I already confirmed it.
Hi
Nice Tutrial, but I can’t download
Please download.
This tutorial is not able to delete the upload file if you upload once.
Sorry, but I couldn’t download…..
Please help !
nice tuts, but i couldn’t downlod it, , ,
Not able to download, pl. help.
Hi Devu,
You can download now. Email list has been refreshed.
[…] friends, We got good response for tutorial on uploading multiple files using dropzone.js and php. We also got too many queries from new developers that how you can insert the uploaded image info […]
I activate from my email already but It s not able to download, please help.
Please download your file.
I have subscribed already. but it says that My Email id is not on the list. On another side, I saw , emails are being uploaded after 12 hours. Sad
Hi Ujjal,
Email list has been refreshed, You can download your file now.
Regards:
Sanjeev
please email to me the code, I already subscribe but then I cannot download the code, thank you
Hello Sanjeev, i want to do this same thing in cakephp. I know it is possible but do you have any idea how to implement it in cakephp? please reply?
How can i add flv, swf and mp4 extension. so far its working only on png, gif and jpg. thanks
Hi, I use the Dropzone.js in my project and I use it to list and upload files, but when I upload the files I change the name of file and create one event to open the file uploaded in new tab. The problem is, the link to open the file, because in “addedfile” function the file.name is the original, but I need to create a link to server file, that now have a new name.
What I did was, on “addedfile” function create one event with link to file.name (because it’s mandatory to list files) with next code:
file.previewElement.addEventListener(“click”, function() {
window.open(“uploads” + file.name, ‘_blank’);
});
and then, on “success” function I try to change this event with same code, but it add a new link, and open 2 new tabs, one with original filename and other with the new name (the correct name).
My question is: How to change the EventListner, instead create a new link (removeEventListner(…) is not working), or in “addedfile” function save this new name on Dropzone plugin (in “addedfile” function the code file.name = “abc.docx” is not working)?
Thanks in advance.
Anyone knows how to resolve my problem?
I have subscribed but still can’t download?
Hi! I still can’t download the file.
how to change the maximum file upload? I can not upload files over 1MB? pls hlp me
Hi,
Thanks a lot for your such wonderful tutorial.
I have a simple problem that you can easily fix.
I just changed the id of dropzone form element for further customization as:
but now onwards the file is not moved to real path!! How can we fix it ?
hello nt able to download…why it is…
I have subscribed but still says I cannot download?
Already subscribed. Unable to download. Its showing “Sorry, We dont have your email. Please Subscribe Below”
Why do you do this method of download? It is inconvenient for us…
Ah, and I also can’t download 🙁
Please get your file now. Sorry for the trouble, I will be converting it into real time system soon.
Thanks:
Sanjeev
[…] we have already posted tutorials on drag drop file upload using DropZone.js and then How to submit uploaded file to Database in DropZone.js. Both the tutorials are getting […]
I have subscribed to your feedburner, but unable to download file.
HI Vikram,
Email list has been refreshed. Please get your file now.
Thanks:
Sanjeev
I have subscribed to your feedburner, but unable to download file.
Me too… days ago 🙁
Hi Roberto,
Please check again. I am able to download the file using your email id as it is already activated in the system.
Thanks:
Sanjeev
i cant download it 🙁
great tutorial !!!!
[…] see how to create ajax image upload using javascript and PHP. I have already published tutorial on drag drop file upload using jQuery and Dropzone.js, but this script will have its own significance as it’s purely javascript based and uses jQuery […]
ser pls send me the code for multi upload tnx
hello
does anyone knows how to reorder the images after uploading?
How to Download it? It is Very helpful Thanks alot
Email list has been refreshed. Please download now 🙂
i cant download your code 🙁
Please download now 🙂
Please could you active my email in order to download the code?
I was tray many time but still didn’t download your code, don’t know what happen, please help thank you. 🙂
Awesome work by you, thanks for sharing.
Thanks your tutorial.
I do try to delete, but not work
$.fn.dropzone.on(‘complete’, function(file) {
$.fn.dropzone.removeFile(file);
});
I’ve subscribed to your feedburner.. can you send me download link please? I need your help
Hi,
Thanks a lot for your such wonderful tutorial.
I have a simple problem that you can easily fix.
I want to add more functionality such as when to upload image in drop box and then to click on image and to display popup of this image and in the popup image are cropping and to save in thumbnail folder. for example like in facebook to upload image and then click it cropped and save …..
so please help me…!
Hi,
I cant download the demo, can you please help me?
I can´t download your project…!!!
Hi i want Drag Drop image with submit button. If you provide me this code it will be helpfull for me
How to use Submit botton? After submit imeges will be upload. i want this . how to use submit botton?
i want to it help me
Hi,
Please get your file now.
Hi. First. Thanks again for those great Tuts.
Some years before you helped me with a little problem with the code.
Now I have another question. Maybe you have an idea.
Is it possible to select only some documents from my uploaded documents ( by clicking a checkbox or so) an send them to an emailadress?
I hope you can understand what i am meening.
Best greats from germany
Lukas
Hi,
I can’t download the file even though I subscribe already.
Thanks
Hi,
Please download your file now.
I just subscribed for this project to download it, but when i give my email address then it show not subscribe now what to do to download this project??
You can download the file now 🙂
I subscribed, but not downloading your file. It’s very good…….
If any way to download your source code, plz provide me link.
Thank you.
Im getting below error.
“Server responded with 0 code.”
Can you please help me to resolve the error?