Last updated on November 23, 2017

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.

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

File Upload using dropzone.js and Codeigniter - arjun.net.in

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