CodeIgniter upload multiple images using drag and drop using dropzone

Breadcrumb Breadcrumb
CodeIgniter upload multiple images using drag and drop using dropzone

CodeIgniter upload multiple images using drag and drop using dropzone

In this example we are going to explain how to upload mulitple images using dropzone library in Codeigniter. Simple drag and drop image on the webpage. dropzone jQuery plugin, you can easily upload images on the server. if you have any requirment of uploading builk images dropzone is the best option. Dropzone has a preview and remove option where you can add, view and remove option. 

Dropzone provides the different type of validation rules like max file upload, upload specific type of file like you can set the validation rule to take only jpeg extension. As a Codeigniter Development Company india we have used Dropzone in many of our web based application development company in Coimbatore. 

Follow below Steps to upload multiple images using dropzone

Step 1: Download Codeigniter latest Version


In this first step, Download Codeigniter latest Version to start with scratch. 

Step 2: Add Routes

In this step, I will setup two routes in route file to handle the request to upload file on the server.

Routes file Path - 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['dropzone-upload-image'] = 'ImageController';
$route['dropzone-upload-image/post']['post'] = 'ImageController/uploadImage';
?>

Step 3: Create Controller

In this step, create a controller "ImageController.php".

Controller file Path - application/controllers/.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ImageController extends CI_Controller {
    public function index()
    {
        $this->load->view('fileupload');
    }

    public function uploadImage()
    {
        $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 "fileupload.php"

In this step, create a view file "fileupload.php" to render the HTML form to upload image.

View file Path application/views/"fileupload.php"

<!DOCTYPE html>
<html>
<head>
    <title>Codeigniter - Upload multiple images using dropzone.js</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.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">
            <form a ction="dropzone-upload-image/post" enctype="multipart/form-data" class="dropzone" id="image-upload" method="POST">
                <div>
                    <center><h3>Click here to upload multiple image</h3></center>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>
</body>
</html>

Confused about your business model?

Request a FREE Business Plan.

India +91 ▼

Tags

  • CodeIgniter upload multiple file different directory

  • Multiple upload Dropzone CodeIgniter

  • Drag and drop multiple file upload in PHP

  • How to upload 2 separate images in CodeIgniter
  • How to upload two different files in CodeIgniter

  • Multiple image upload in CodeIgniter with database demo

  • CodeIgniter multiple file upload (array)

  • Drag and drop multiple image upload in PHP

  • Dropzone PHP multiple files upload

Related Posts

Shopify Product Upload And Data Entry Services
eCommerce |

Shopify Product Upload And Data Entry Services

In today's cut-throat eCommerce environment, effective Shopify shop management is essential to company success. Thousands of online retailers utilize Shopify, which offers a robust and easy-to-use

Read More
Docker Usage
Web Design |

Docker Usage

What is Docker? Docker is an open platform for developers and sysadmins to build, ship, and run distributed applications. Consisting of Docker Engine, a portable, lightweight runtime and packaging

Read More
Best Travel Website Design Ideas And Inspirations
Travel | Ideas and Inspirations | Software Development | Web Development | Web Design |

Best Travel Website Design Ideas And Inspirations

In today’s competitive digital world, a stunning and functional travel website is a must for travel agencies, tour operators, and hospitality businesses. A well-designed travel website can attra

Read More