How to Drag and Drop File Upload with Dropzone in Codeigniter

How to Drag and Drop File Upload with Dropzone in Codeigniter

How to Drag and Drop File Upload with Dropzone in Codeigniter

0 Sales


Drag and Drop transfer is a user-friendly method of uploading files to the server. In most cases, the user selects files to upload from their local disc. The Drag&Drop function, on the other hand, allows the user to drag files from their local disc and drop them into the HTML element for upload. To add file upload capability, you may leverage the web application's drag-and-drop upload feature.


DropzoneJS is a transparent JavaScript package that makes it simple to add drag-and-drop file upload capability with picture preview. It added a drag and drop action to the standard HTML form, making it droppable. DropzoneJS is not dependent on any other libraries and may be used without jQuery. Dropzone and PHP can be simply connected with the drag-and-drop file upload capabilities.


Dropzone may be used to create the feature of uploading numerous files or photos in your CodeIgniter-based web application. In this article, we'll teach you how to use DropzoneJS to implement drag and drop file upload in CodeIgniter.


The following functionality will be added in the sample code to upload multiple files using CodeIgniter's drag-and-drop capability.


- Allow users to upload numerous files by dragging and dropping them.

- Using CodeIgniter's Upload library, upload numerous files to the server.

- File data should be saved in the MySQL database.

- Retrieve and display folders from the database on the web page.

Before you begin, examine the filesystem of the demo CodeIgniter Drag & Drop File Upload app.


├── 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/


Create Database Table


A table in the database is required to store the file information. In the MySQL database, the below SQL generates a media table with some simple columns.

CREATE TABLE `files` (
 `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `uploaded_on` datetime NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


Create Upload Folder

A directory on the server is required to hold the files. Create a folder (uploads/) in the CodeIgniter application's root folder to hold the uploaded files.

Controller (Upload_file.php)

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

1. __construct() –

 - Loads the File model, which aids with inserting file information into the database and retrieving file data from the database.

2. index() –

 - Using the File model's getRows() function, retrieve all photos from the database.

 - Pass data from files to the view.

3. dragDropUpload()

 - Set settings (upload path, acceptable file types, and so on), then load and initialise the Upload library.

 - Transfer files to the server using the Upload library's do upload() method.

 - Insert the file data into the database using the File model's insert() function.

defined('BASEPATH') OR exit('No direct script access allowed'); 
class Upload_File extends CI_Controller { 
    function  __construct() { 
        // Load file model 
    function index(){ 
        $data = array(); 
        // Get files data from the database 
        $data['files'] = $this->file->getRows(); 
        // Pass the files data to view 
    function dragDropUpload(){ 
            // File upload configuration 
            $uploadPath 'uploads/'; 
            $config['upload_path'] = $uploadPath; 
            $config['allowed_types'] = '*'; 
            // Load and initialize upload library 
            // Upload file to the server 
                $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); 


Model (File.php)

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

1. __construct() – Specify the name of the table where the file's data will be placed.

2. getRows() –

      - Retrieve data from the database for the file.

      - If the ID is supplied, it returns a single record; otherwise, it returns all records.

3. insert() -

      - Use the insert() method of the CodeIgniter Query Builder Class to input file data into the database.


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 ''){ 
            $query $this->db->get(); 
            $result $query->row_array(); 
            $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; 



View (upload_file/index.php)


Here include 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>



Make a form widget and add a dropzone class property to it.

 - The action property of the form> tag specifies the action to be taken in order to complete the server-side upload.

 - The Dropzone library is identified by the dropzone class.

 - Dropzone will connect to this form element, and the files that are dragged are sent to the Upload File controller's dragDropUpload() function.

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


The files that have been uploaded will be shown beneath the Drag&Drop form element.

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

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" /> 
} }else{ 
    <p>No file(s) found...</p> 
<?php ?>


You can use it for personal or commercial projects. You can't resell it partially or in this form.


Create Date : Jan 22, 2022

Updated Date : Jan 23, 2022


Comments : 0

Downloads : 0