How to Implement multiple drag and drop image upload using Dropzone in CodeIgniter
Today i would like to share with you drag and drop image upload using dropzone.js in codeigniter application.
We always require to make multiple file or image uploading function in our web application or project. We use input with multiple with image upload but it's not looks great and user does not like pretty much, so we should make it better. Image uploads is very basic feature for all project or website, But if you are working on PHP or any PHP framework like laravel, codeigniter, yii etc then you can simply use dropzoneJS library.
dropzone.js is an open source js library that you can simply use it for make a nice drag and drop or your web site. Dropzone JS Library provide us to drag and drop multiple file uploading. Dropzone JS library is very simple to use. Dropzone JS also provide us to validation like max file upload, specific extension etc.
So, today i going to give you example of How to build multiple file or image uploads using dropzone.js library. In this example i also use bootstrap also that way we can build better layout. In this tutorial you can see demo of multiple image upload and also download full code of this script.
In this three step you can get full example of image upload, In this example i use dropzone.js cdn for import, you can also download in your local. So let's see bellow preview and follow step:
Preview:
Step 1: Download Fresh Codeigniter 3
In First step we will download fresh version of Codeigniter 3
Step 2: Add Route
In this step you have to add two routes in our route file. We will manage one for view and another for file upload, so let's put route as bellow code:
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
Ok, now first we have to create one new controller DropzoneImageController with index() and imageUploadPost(). so create DropzoneImageController.php file in this path application/controllers/DropzoneImageController.php and put bellow code in this file:
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
In this step, we will create view file dropzoneimage.php file for create form for upload image. So let's create dropzoneimage.php file.
application/views/myPost.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter - Multiple Image upload using dropzone.js</title>
<script src="http://demo.crowdforgeeks.com/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://demo.crowdforgeeks.com/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>
Ok, now we are ready to run our example. So let's run bellow command on your root directory for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000/image-upload
I hope it can help you..
