drag and drop file upload using php

this post is based on creating a drag and drop file upload using php for that we will be taking help of opensource pogect known as dropzone

you  can see the demo and download the script from link below.

DOWNLOAD CODE  DEMO

what is dropzone?

Dropzone.js is a lightweight JavaScript library which provides drag and drops file upload with preview.

Image result for dropzone.js logo

It works with or without jQuery within the project and also it doesn’t require any other libraries.

It doesn’t upload the file to your server. For uploading, I am using PHP in this tutorial.

File upload is a common functionality that’s needed to implement in most of web projects. Mostly we need to implement file uploading functionality by browsing file directory through click. But sometimes it is required to also handle file upload by drag and drop. So if you’re looking for tutorial to implement drag and drop multiple file upload using php in your project, you’re here at right place. In this tutorial, we will learn how to implement drag and drop multiple file upload using PHP and jquery. Here we have used DropzoneJS jQuery plugin to handle drag and drop file upload. We have also used PHP to upload the files on server and insert file details in MySQL database table.

So let’s start the coding. Before begin, take a look at major files used for this tutorial and demo.

demo

creating drag and drop file upload using php

So let’s start the coding. Before begin, take a look at major files used for this tutorial and demo.

  • index.php
  • file_upload.php
  • dropzone.js
  • dropzone.css

Step1: Create Database Table

[php]CREATE TABLE IF NOT EXISTS `uploads` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`file_name` varchar(255) NOT NULL,
`upload_time` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
)
<span>[/php]

 

Step2: Create Database Connection

[php]<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demos";
$conn = mysqli_connect($servername, $username, $password, $dbname);
?>[/php]

 

Step3: Include Dropzone Plugin Files

[php]<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="js/dropzone.js"></script>[/php]

 

Step4: Create File Upload Form HTML

[php]<div class="container">
<h2>Example: Drag and Drop File Upload using jQuery and PHP</h2>
<div class="file_upload">
<form action="file_upload.php" class="dropzone">
<div class="dz-message needsclick">
<strong>Drop files here or click to upload.</strong><br />
<span class="note needsclick">(This is just a demo. The selected files are <strong>not</strong> actually uploaded.)</span>
</div>
</form>
</div>
</div>[/php]




Step5: Upload Files on Server

[php]if(!empty($_FILES)){
$upload_dir = "uploads/";
$fileName = $_FILES[‘file’][‘name’];
$uploaded_file = $upload_dir.$fileName;
move_uploaded_file($_FILES[‘file’][‘tmp_name’],$uploaded_file[/php]

 

demo download code

if you liked this article subscribe to our page using push notifications or email subscription.

Leave a Reply

avatar
  Subscribe  
Notify of