Drag Drop Multiple File Upload with Dropzone js and Save to Database

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.

drag-drop_file_upload_dropzone

LIVE DEMO    Download

For this tutorial we have created a table named ‘file_upload’, below image describes table schema.

table file upload

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.

40 thoughts on “Drag Drop Multiple File Upload with Dropzone js and Save to Database”

  1. Ajaypal Bhoreriya

    Hi Satyendra,

    Thanx, for this great tutorial. Can you provide me any tutorial for email attachment with image/doc file. Thanx in advance.

    1. Hello, subscribed over 12 hours ago and still can not get access to the code. Can you please accept my email. Thanks

  2. Fantastic tutorial Satyendra!
    Can’t wait until you post your next tutorial on removing images using DropZonejs and MySql/PHP

    Mikolaj
    Canada

  3. Hy, i need to download source code for demo and i subscribed for your feedburner, but unfortunately still cant download =(

  4. 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.

  5. how do i to get the code? I’ve subscribed but still can not download. Please help me …

  6. 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

  7. Hy, i need to download source code so i subscribed the newsletter but it is still a no go !! what to do ?

  8. Pingback: Delete uploaded file in Dropzone.js

  9. 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.

  10. Ankita Chakraborty

    How do i to get the code? I’ve subscribed but still can not download. Please help me

  11. 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?

  12. I have subscribed would really like to download but can’t did you do a tutorial on remove i am new here thanks Andrew.

  13. Can you please activate me so i can download this tutorial this is my second request thank you.

  14. Dear Sanjeev,
    Can you please let me download you sent me something in my email but it wasn’t this thanks Andrew.

  15. 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.

    1. 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 …….

  16. 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

  17. 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?

  18. Hi,

    I have subscribed to infotuts but still I m not able to download.
    Please help me?

    Regards,

  19. 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.

Comments are closed.