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.


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:

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);
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'];
 $fsize=($_FILES["file"]["size"] / 1024);
 // Change $flink path to your folder where you want to upload images.
$arr= array('fname'=>$file_name,
 'fdate'=>date('Y-m-d h:i:s'));

<p style="text-align: justify;">

Our HTML Form:

 <div id="main">
 <p> Drag n Drop Your image files below - <b>InfoTuts</b></p>
<form action="file-upload.php" class="dropzone"></form>

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.

About satyendra

I am a PHP and WordPress developer. I love to code and build something useful.

Related posts:

40 Responses so far.

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


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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *