Codeigniter multiple drag and drop image upload example from scratch

Codeigniter multiple drag and drop image upload example from scratch

In this post we will give you information about Codeigniter multiple drag and drop image upload example from scratch. Hear we will give you detail about Codeigniter multiple drag and drop image upload example from scratchAnd how to use it also give you demo for it if it is necessary.

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, so if you haven’t download yet then download from here : Download 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';

Also see:PHP Image upload without refreshing page using jquery example

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

*

* - or -

*

* - 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.onlinecode/plugin/jquery.js"></script>

<link rel="stylesheet" href="http://demo.onlinecode/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 >

<div >

<div >

<h2>Codeigniter - Multiple Image upload using dropzone.js</h2>

<form action="/image-upload/post" enctype="multipart/form-data" 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:

Also see:Codeigniter JQuery Ajax image upload example from scratch

http://localhost:8000/image-upload

I hope it can help you..

Hope this code and post will helped you for implement Codeigniter multiple drag and drop image upload example from scratch. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

24  +    =  31

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US