File Upload using dropzone.js and Codeigniter

In this post, I will show you, how to upload files with drag and drop interface with dropzone.js in your Codeigniter framework applications.

Dropzone.js comes with nice CSS and Javascript that makes it a breeze to work with HTML 5 file upload API. It provides you with a file input container that users can drag and drop files unto or just click the container to select multiple files from the file system.

Supported Browsers?

Based on the plugin documentation Dropzone.js works in :

      Chrome 7+
      Firefox 4+
      IE 10+
      Opera 12+ (Currently disabled for MacOS because their API is buggy)
      Safari 5+

For all the other browsers, dropzone provides an old-school file input fallback.

How to implement in Codeigniter

1.First Download CodeIgniter, and setup locally. Then create a folder in application root folder(where index.php lives) for storing uploaded Files.

2. Download dropzone.js from https://github.com/enyo/dropzone, extract the zip copy all files from download folder, and place it in your resources folder(create folder just like uploads).

3. create a controller File called dropzone.php in controller dir then place the fallowing code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Dropzone extends CI_Controller {
  
    public function __construct() {
       parent::__construct();
       $this->load->helper(array('url','html','form'));
    }
 
    public function index() {
        $this->load->view('dropzone_view');
    }
    
    public function upload() {
        if (!empty($_FILES)) {
        $tempFile = $_FILES['file']['tmp_name'];
        $fileName = $_FILES['file']['name'];
        $targetPath = getcwd() . '/uploads/';
        $targetFile = $targetPath . $fileName ;
        move_uploaded_file($tempFile, $targetFile);
        // if you want to save in db,where here
        // with out model just for example
        // $this->load->database(); // load database
        // $this->db->insert('file_table',array('file_name' => $fileName));
        }
    }
}
 
/* End of file dropzone.js */
/* Location: ./application/controllers/dropzone.php */

4 Create a view File Called dropzone_view.php in views.Feed with bellow code

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<link href="<?php echo base_url(); ?>resouces/css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>resouces/dropzone.min.js"></script>
</head>
<body>
<h1>File Upload using dropzone.js and Codeigniter - arjun.net.in</h1>
<form action="<?php echo site_url('/dropzone/upload'); ?>" class="dropzone"  >
</form>
</body>
</html>

I hope this tutorial helps you please don’t forget to give us your feedback in comments.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.