We will learn how to Codeigniter multiple drag and drop image upload example from scratch. 

Step 1: 

Download Fresh Codeigniter 3 Download Codeigniter 3


Step 2: 

Add Route application/config/routes.php

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


$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;


$route['image-upload'] = 'DropzoneImageController';
$route['image-upload/post']['post'] = 'DropzoneImageController/imageUploadPost';


Step 3: 

Create Controller application/controllers/DropzoneImageController.php

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


class DropzoneImageController extends CI_Controller {


	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/

	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->view('dropzoneimage');
	}


	public function imageUploadPost()
	{
		$config['upload_path']   = './uploads/'; 
		$config['allowed_types'] = 'gif|jpg|png'; 
		$config['max_size']      = 1024;


      	$this->load->library('upload', $config);
		$this->upload->do_upload('file');


		print_r('Image Uploaded Successfully.');
        exit;
	}
}


Step 4: 

Create View Files application/views/myPost.php

<!DOCTYPE html>
<html>
<head>
	<title>Codeigniter - Multiple Image upload using dropzone.js</title>
	<script src="http://demo.rathorji.in/plugin/jquery.js"></script>
	<link rel="stylesheet" href="http://demo.rathorji.in/plugin/bootstrap-3.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>


<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h2>Codeigniter - Multiple Image upload using dropzone.js</h2>
			<form action="/image-upload/post" enctype="multipart/form-data" class="dropzone" id="image-upload" method="POST">
				<div>
					<h3>Upload Multiple Image By Click On Box</h3>
				</div>
			</form>
		</div>
	</div>
</div>


<script type="text/javascript">
	Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>


</body>
</html>

Now you can do this example