Hi 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 into database. In this tutorial we would be doing that. Once all images are uploaded and inserted into database you can easily fetch them and display them wherever you want in your web application. In this tutorial we will save file name, file size (in kb), file path, file type and file upload date in our database table.
[button_round color=”blue” url=”infotuts.com/demo/drag-drop-file-uploader-dropzone-js/”] LIVE DEMO [/button_round] [button_round color=”blue” url=”infotuts.com/demo/drag-drop-file-uploader-dropzone-js/download.html”] Download [/button_round]
For this tutorial we have created a table named ‘file_upload’, below image describes table schema.
Now we are just adding code to insert details of file in database to our previous code of uploading files to server.
Here is our code for file_upload.php:
</p>
<?php
include 'db.php';
$upload_dir = 'myuploads';
function insert_data($ar){
$obj=new DB();
$key="(f_name , f_size, f_link,f_type,d_date)";
$val="('{$ar['fname']}', '{$ar['fsize']}','{$ar['flink']}','{$ar['ftype']}','{$ar['fdate']}')";
mysqli_query($obj->connection(),"INSERT INTO file_upload ".$key." VALUES ".$val);
//mysqli_close($obj->con);
}
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.
$fname = $targetPath.time().'-'. $_FILES['file']['name'];
$file_name=time().'-'. $_FILES['file']['name'];
$ftype=$_FILES["file"]["type"];
$fsize=($_FILES["file"]["size"] / 1024);
$tmpname=$_FILES["file"]["tmp_name"];
// Change $flink path to your folder where you want to upload images.
$flink='http://localhost/dragdrop%20file%20upload/myuploads/'.$file_name;
$arr= array('fname'=>$file_name,
'fsize'=>$fsize,
'flink'=>$flink,
'ftype'=>$ftype,
'fdate'=>date('Y-m-d h:i:s'));
insert_data($arr);
move_uploaded_file($tempFile,$fname);
}
?>
<p style="text-align: justify;">
Our HTML Form:
<body> <div id="main"> <p> Drag n Drop Your image files below - <b>InfoTuts</b></p> </div> <form action="file-upload.php" class="dropzone"></form> </body>
Note: You need to change the database name and other settings in ‘dp.php’ file that you will get in downloaded code. You should also restrict file types to be uploaded via your uploader.
We also got queries from people on how to delete uploaded file after successful upload. We will be covering up that tutorial in next posts. Share this tutorial with your friends.
Comments
40 responses to “Drag Drop Multiple File Upload with Dropzone js and Save to Database”
Hi Satyendra,
Thanx, for this great tutorial. Can you provide me any tutorial for email attachment with image/doc file. Thanx in advance.
Hello, subscribed over 12 hours ago and still can not get access to the code. Can you please accept my email. Thanks
Hello Sir,
I have subscribe my email but still I m not able to download.
Can u please help me?
Fantastic tutorial Satyendra!
Can’t wait until you post your next tutorial on removing images using DropZonejs and MySql/PHP
Mikolaj
Canada
Thanks for complement,
I will post the new tutorial as soon as possible.
Hy, i need to download source code for demo and i subscribed for your feedburner, but unfortunately still cant download =(
Hi, nice tutorial. But it is impossible to download it! Could you please fix it?
Best
please get your file now 🙂
Thumbs up! Thx
BION I’m imrsesped! Cool post!
Hello Satyendra
Your code works well but I noticed that only files less than one meg in size the paths are not stored in the database. They upload perfectly and I can see them in the uploads folder but not in the database?
I checked the upload_max_filesize and post_max_size are both 8M in php.ini
even changed the values in your code from 1024 to 4096 etc. no change.
Any suggestions.
how do i to get the code? I’ve subscribed but still can not download. Please help me …
Hello,
Super nice tutorial! I hope you quickly insert the other post, on how to remove the file from the server and database.
Greeting, Badmaus
Hy, i need to download source code so i subscribed the newsletter but it is still a no go !! what to do ?
i subscribed but i cannot download the link please help. God Bless
[…] 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 good response from our awesome readers like you. The only option […]
how do i to get the code? . Please help me
i had received code , thank you for giving this code…
Gud job,Thanks it is very useful to me.
pls modify it to save some text fields also with images .
and pls mail it to me:chittibabu048@gmail.com,
thanks once again.
How do i to get the code? I’ve subscribed but still can not download. Please help me
Hi,
I have subscribed and my email is verified as well. But still i can’t able to download the code. Can you help me?
I have subscribed would really like to download but can’t did you do a tutorial on remove i am new here thanks Andrew.
Can you please activate me so i can download this tutorial this is my second request thank you.
Dear Sanjeev,
Can you please let me download you sent me something in my email but it wasn’t this thanks Andrew.
Hello,
Thank you for sharing to us. This is great tutorial ever. I have one question
sir Sanjeev how to use it with existing form data like for instance I have product data. Product Name, Price, etc. ?
Thank you.
James did you figure it out i am trying to do the same thing as you. I got as far as both in same database but showing different id’s. If i figure it out i’ll post here any help would be great …….
I did get this working Sanjeev thank you for your knowledge. To Sanjeev or someone who may know the answer, in this tutorial all images are given a unique id how is it possible to give each set of uploaded images a unique id. IE if i upload 3 pictures ID =1
then i upload 5 more ID=2
thanks if anyone can help
I am trying to download this and it has been over the 12 hour period. Is there any way to expedite this so I can get started?
nice tutorial, can u plz tell me howi can limit the number of upload to maximum 3
please activate my email
I really need the code .. thanks 🙁
Please try downloading the code now. You should be able to get it.
Thanks:
Sanjeev
Unable to download source. I subscribed. Any way I can download the code prior to 24 hrs?
Hi,
Please download your file now.
Thanks:
Sanjeev
Hello,
I have subscribe my email but still I m not able to download.
Can u please help me, please?
Hi,
Please download your file now.
Thanks:
Sanjeev
Hi,
I have subscribed to infotuts but still I m not able to download.
Please help me?
Regards,
Please try downloading your file.
Thanks:
Sanjeev
Hi,
I have subscribed, but I didn’t receive anything. Can you send it to my email, or give me an url to download the demo code?
Thank you.
Please download your file now