Drag and Drop file upload with Dropzone in CodeIgniter 3

Dropzone is a JavaScript library that allows uploading file by drag’n’drop and displays the file preview after upload.

It is easier to add to the page and it does not depend on any library like jQuery.

The file will upload to the server via AJAX.

In this tutorial, I show how you can use the Dropzone library to upload the file in CodeIgniter 3.

Drag and Drop file upload with Dropzone in CodeIgniter 3

Demo Download

Default controller
Controller
View
Demo
Conclusion

1. Default controller

Open application/config/routes.php and edit default_controller value to User.

$route['default_controller'] = 'User';

2. Controller

Create a new User.php file in application/controllers/ folder and also create a uploads folder at project root to store files.

Create 3 methods –

__construct() – Load URL helper.
index() – Load user_view view.
fileUpload() – This method is called when a file is a drag and drop on the dropzone container to upload a file. Here, set the upload preference – upload path, allowed type, max file size, and file name.

Completed Code

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class User extends CI_Controller {

  public function __construct(){

    parent::__construct();
    $this->load->helper('url');

  }

  public function index(){

    // load view
    $this->load->view('user_view');

  }

  // File upload
  public function fileUpload(){

   if(!empty($_FILES['file']['name'])){

     // Set preference
     $config['upload_path'] = 'uploads/'; 
     $config['allowed_types'] = 'jpg|jpeg|png|gif';
     $config['max_size'] = '1024'; // max_size in kb
     $config['file_name'] = $_FILES['file']['name'];

     //Load upload library
     $this->load->library('upload',$config); 

     // File upload
     if($this->upload->do_upload('file')){
       // Get data about the file
       $uploadData = $this->upload->data();
     }
   }

 }

}

3. View

Create a new user_view.php file in application/views/ directory.

Download & Include

Download Dropzone from here and create a resources directory at project root to store dropzone.js and dropzone.css files.

Include dropzone.js and dropzone.css in <head> section.

HTML

Just need to create a <form action = "<?= base_url('index.php/User/fileupload') ?>" class= "dropzone" id="fileupload">. When a page is run this will add a container for upload files by drag & drop.

Script

Use Dropzone.options to allow only image files and set the max file size to 1 MB. Here, fileupload is the id of <form>.

Dropzone.options.fileupload = { acceptedFiles: 'image/*', maxFilesize: 1 // MB };

Completed Code

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
  <head> 
    
    <!-- Dropzone CSS & JS -->
    <link href='<?= base_url() ?>resources/dropzone.css' type='text/css' rel='stylesheet'>
    <script src='<?= base_url() ?>resources/dropzone.js' type='text/javascript'></script>
    
    <!-- Dropzone CDN -->
    <!-- 
    <link href='https://unpkg.com/dropzone@5/dist/min/dropzone.min.css' type='text/css' rel='stylesheet'>
    <script src='https://unpkg.com/dropzone@5/dist/min/dropzone.min.js' type='text/javascript'></script>
    -->
    <style>
    
    .dz-message{
      text-align: center;
      font-size: 28px;
    }
    </style>
    <script>
    // Add restrictions
    Dropzone.options.fileupload = {
      acceptedFiles: 'image/*',
      maxFilesize: 1 // MB
    };
    </script>
  </head>
  <body>

    <div class='content'>
      <!-- Dropzone -->
      <form action="<?= base_url('index.php/User/fileupload') ?>" class="dropzone" id="fileupload">
      </form> 
    </div> 

  </body>
</html>

4. Demo

View Demo

5. Conclusion

With only <form > you can add dropzone to your webpage. Whenever a file is dragged then it will send an AJAX request to <form > action URL for file upload.

Modify file restriction for the Dropzone according to your requirement in the <script > you can find more about here and also in the controller file.

You can view the CodeIgniter 4 version of this tutorial here.

If you found this tutorial helpful then don't forget to share.

Contents

1. Default controller

2. Controller

3. View

4. Demo

5. Conclusion