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