Uploading files to the server with drag and drop is a simple process. In most cases, the user uploads files from his or her local drive. The Drag&Drop feature, on the other hand, allows the user to drag files from their local drive and drop them into the HTML element for upload. To implement the file upload functionality, you can leverage the web application’s drag and drop upload feature.

DropzoneJS is a free JavaScript module that makes it simple to add drag-and-drop file upload capability with image preview. It added a drag and drop event to a standard HTML form, making it droppable. The DropzoneJS library is independent of any other libraries, thus you can use it even if you don’t have jQuery installed. Dropzone with PHP can simply incorporate the drag-and-drop file upload capability.

Dropzone can be used to upload many files or images if your web application was built with CodeIgniter. In this tutorial, we’ll teach you how to use DropzoneJS to integrate drag-and-drop file upload in CodeIgniter.

The following functionality will be implemented in the sample code to upload multiple files using CodeIgniter’s drag-and-drop feature.

Allow users to upload numerous files by dragging and dropping them.
Using CodeIgniter’s Upload library, upload numerous files to the server.
Data from files should be stored in a MySQL database.
Retrieve and display files/images from the database on the web page.
Take a look at the file structure of the sample CodeIgniter Drag & Drop File Upload application before getting started.

codeigniter_drag_drop_file_upload/
├── application/
│   ├── controllers/
│   │   └── Upload_file.php
│   ├── models/
│   │   └── File.php
│   └── views/
│       └── upload_file/
│           └── index.php
│── assets/
│   ├── js/
│   │   └── dropzone/
│   │       │── dropzone.min.js
│   │       └── dropzone.min.css
│   └── css/
│       └── style.css
│
└── uploads/

Make a database table.
A table in the database is required to store the file information. In the MySQL database, the following SQL creates a files table with some basic fields.

CREATE TABLE `files` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`uploaded_on` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Make a File Upload Folder
A directory on the server is required to hold the files. Create an uploads folder (uploads/) in the CodeIgniter application’s root folder to hold the uploaded files.

Upload file.php is the controller.
The Upload File controller is in charge of uploading numerous files.

__construct() – Loads the File model, which is used to store and retrieve file information in the database.
index() – Using the File model’s getRows() method, fetch all photos from the database.
Pass the data from the files to the display.

Set options (upload path, acceptable kinds, etc.) and load and initialise the Upload library with dragDropUpload().
Using the Upload library’s do upload() function, upload files to the server.
The insert() method of the File model is used to insert file data into the database.

<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 
class Upload_File extends CI_Controller { 
function __construct() { 
parent::__construct(); 
// Load file model 
$this->load->model('file'); 
} 
function index(){ 
$data = array(); 
// Get files data from the database 
$data['files'] = $this->file->getRows(); 
// Pass the files data to view 
$this->load->view('upload_file/index', $data); 
} 
function dragDropUpload(){ 
if(!empty($_FILES)){ 
// File upload configuration 
$uploadPath = 'uploads/'; 
$config['upload_path'] = $uploadPath; 
$config['allowed_types'] = '*'; 
// Load and initialize upload library 
$this->load->library('upload', $config); 
$this->upload->initialize($config); 
// Upload file to the server 
if($this->upload->do_upload('file')){ 
$fileData = $this->upload->data(); 
$uploadData['file_name'] = $fileData['file_name']; 
$uploadData['uploaded_on'] = date("Y-m-d H:i:s"); 
// Insert files info into the database 
$insert = $this->file->insert($uploadData); 
} 
} 
} 
}

Modeling (File.php)
The File model is in charge of database operations (fetch and insert).

__construct() – Name the table in which the data from the files will be placed.
Get the file data from the database with getRows().
If the ID is supplied, it returns a single record; otherwise, it returns all records.
insert() — The insert() function of the CodeIgniter Query Builder Class is used to insert file data into the database.

<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 
class File extends CI_Model{ 
function __construct() { 
$this->tableName = 'files'; 
} 
/* 
* Fetch files data from the database 
* @param id returns a single record if specified, otherwise all records 
*/ 
public function getRows($id = ''){ 
$this->db->select('id,file_name,uploaded_on'); 
$this->db->from('files'); 
if($id){ 
$this->db->where('id',$id); 
$query = $this->db->get(); 
$result = $query->row_array(); 
}else{ 
$this->db->order_by('uploaded_on','desc'); 
$query = $this->db->get(); 
$result = $query->result_array(); 
} 
return !empty($result)?$result:false; 
} 
/* 
* Insert file data into the database 
* @param array the data for inserting into the table 
*/ 
public function insert($data = array()){ 
$insert = $this->db->insert('files', $data); 
return $insert?true:false; 
} 
}

Take a look at (upload file/index.php).
Include the DropzoneJS library’s CSS and JS files.

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/dropzone/dropzone.min.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dropzone/dropzone.min.js"></script>

Create a form element with a dropzone class attribute.

The server-side upload action is defined by the action element of the form> tag.
The Dropzone library’s identifier is called the dropzone class.
Dropzone will attach to this form element, and the dropped files will be sent to the Upload File controller’s dragDropUpload() method.

<form action="<?php echo base_url('upload_file/dragDropUpload/'); ?>" class="dropzone"></form>

Under the Drag&Drop form element, the uploaded files will be listed.

The embed> tag is used to display any form of file on a web page (picture, pdf, text, video, etc.).

<?php 
if(!empty($files)){ foreach($files as $row){ 
$filePath = 'uploads/'.$row["file_name"]; 
$fileMime = mime_content_type($filePath); 
?> 
<embed src="<?php echo base_url('uploads/'.$row["file_name"]); ?>" type="<?php echo $fileMime; ?>" width="350px" height="240px" /> 
<?php 
} }else{ 
?> 
<p>No file(s) found...</p> 
<?php } ?>