How to Upload Image in Codeigniter

with Dropify Style [FULL TUTORIAL]

 JANUARY 26, 2018

Giving style to the input file is a pretty hard thing to do.

If you are a beginner, of course this becomes a nightmare for you.

Good news,

Today, in this tutorial, I will share to you how to create upload image using

codeigniter with dropify's style in input file.

So that, image can be preview before upload.

Awesome right?

In this tutorial, I will use Dropify to give style to the input file.

What is Dropify?

Dropify is a plugin css and javascript file to provide style to the input file

and allowing user to select image you want to upload just by click drag and

drop.

Pretty cool right?

So that, user interface can be more user friendly.

Dropify need jquery to run. So, we need jquery for this tutorial.

Besides jquery, we also need bootstrap to make user interface look better.

Ok, Let’s get start it!

First of all, we need to download Dropify, Jquery, Bootstrap,

and Codeigniter.

After that, follow this step-by-step.

Step 1. Creating of database structure

In this tutorial, I use mysql as Database Management System (DBMS).

If you also use mysql, you will love this tutorial.

But,

If you are using other DBMS like Oracle, SQL Server, Maria DB, or

MongoDB.

No, Problem!
Provided you understand SQL (Structured Query Language) better.

Ok, Let's continue!

Please create a database, here I create a database with name upload_db.

If you create a database with the same name it will be better.

Please execute this query to create the database:

1 CREATE DATABASE upload_db;

That query will generate a database with name upload_db.

After that,

Create a table with name gallery with structure like this:

To create a table with structure like that,

You can execute this query:

CREATE TABLE gallery(

1 id INT(11) PRIMARY KEY AUTO_INCREMENT,
2 title VARCHAR(100),
3 file_name VARCHAR(40)
4 )ENGINE=INNODB;
5

Step 2. Setup Codeigniter

Extract codeigniter that has been downloaded earlier to www folder (if you

use wampserver) or htdocs (if you use XAMPP).

Because I use wampserver. So, I extract it to c:/wamp/www/

And then, rename codeigniter project to be dropify_upload.

Like this:

Open dropify folder and create resources folder. And then include the

bootstrap, dropify, and jquery files inside the resources folder.

After that, create new folder named uploads inside resources folder. This

folder will use for upload path.

So that look like this:

Step 3. Configuration
Next step is the configuration on the codeigniter.

Here are some files you need to configure:

1. Autoload.php

To configure the autoload.php, please open the folder:

application/config/autoload.php

like this:
Open autoload.php using text editor like Notepad++ or Sublime Text.

And then find this code:

1 $autoload['libraries'] = array();
2 $autoload['helper'] = array();
Set to be like this:

1 $autoload['libraries'] = array('database');
2 $autoload['helper'] = array('url');
2. Config.php

To configure the config.php, please open the folder:

application/config/config.php

like this:
Open config.php file using text editor, and then find this code:

1 $config['base_url'] = '';
Set to be like this:

1 $config['base_url'] = 'http://localhost/dropify_upload/';
3. Database.php

To configure the database.php, please open the folder:

application/config/database.php

like this:
Open database.php file using text editor, and then find this code:

1
2
3 $active_group = 'default';
$query_builder = TRUE;
4
5 $db['default'] = array(
6
'dsn' => '',
7 'hostname' => 'localhost',
8 'username' => '',
9 'password' => '',
10 'database' => '',
'dbdriver' => 'mysqli',
11 'dbprefix' => '',
12 'pconnect' => FALSE,
13 'db_debug' => (ENVIRONMENT !== 'production'),
14 'cache_on' => FALSE,
15 'cachedir' => '',
'char_set' => 'utf8',
16 'dbcollat' => 'utf8_general_ci',
17 'swap_pre' => '',
18 'encrypt' => FALSE,
19 'compress' => FALSE,
'stricton' => FALSE,
20 'failover' => array(),
21 'save_queries' => TRUE
22 );
23
24
Set to be like this:

1 $active_group = 'default';
2 $query_builder = TRUE;
3
4 $db['default'] = array(
5 'dsn' => '',
6 'hostname' => 'localhost',
7 'username' => 'root',
'password' => '',
8 'database' => 'upload_db',
9 'dbdriver' => 'mysqli',
10 'dbprefix' => '',
11 'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
12 'cache_on' => FALSE,
13 'cachedir' => '',
14 'char_set' => 'utf8',
15 'dbcollat' => 'utf8_general_ci',
16 'swap_pre' => '',
'encrypt' => FALSE,
17 'compress' => FALSE,
18 'stricton' => FALSE,
19 'failover' => array(),
20 'save_queries' => TRUE
21 );
22
23
24

Step 4. Controller
Go ahead and create a controller file controllers/Upload.php with the

following this code:

1 <?php
2 class Upload extends CI_Controller{
3
4 function __construct(){
5 parent::__construct();
$this->load->model('upload_model'); //load model upload model
6 $this->load->library('upload'); //load library upload
7 }
8
9 function index(){
10 $this->load->view('upload_view');
11 }
12
function do_upload(){
13 $config['upload_path'] = './resources/uploads/'; //path folder
14 $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //Allowing types
15 $config['encrypt_name'] = TRUE; //encrypt file name
16
17 $this->upload->initialize($config);
if(!empty($_FILES['filefoto']['name'])){
18
19
20 if ($this->upload->do_upload('filefoto')){
21
22 $data = $this->upload->data();
23 $image = $data['file_name']; //get file name
24 $title = $this->input->post('title');
25 $this->upload_model->upload_image($title,$image);
echo "Upload Successful";
26
27 }else{
28 echo "Upload failed. Image file must be gif|jpg|png|jpeg|bmp";
29 }
30
31 }else{
32 echo "Failed, Image file is empty.";
}
33
34 }
35
36
37 }
38
39
40
41

Step 5. Model
Go ahead and create a model file models/Upload_model.php with the

following this code:

1
2 <?php
class Upload_model extends CI_Model{
3
4
function upload_image($title,$image){
5 $data = array(
6 'title' => $title,
7 'file_name' => $image,
8 );
$result=$this->db->insert('gallery',$data);
9 return $result;
10 }
11 }
12
Step 6. View
Go ahead and create a view file views/upload_view.php with the following

this code:

1 <!DOCTYPE html>
<html>
2 <head>
3 <meta charset="utf-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi
5 <title>Product List</title>
6 <link rel="stylesheet" type="text/css" href="<?php echo base_url().'resources/cs
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'resources/dr
7 </head>
8 <body>
9 <div class="container">
10 <!-- Page Heading -->
<div class="row">
11
<div class="col-6 offset-md-3">
12 <form action="<?php echo site_url('upload/do_upload');?>" method="post"
13 data">
14 <div class="form-group">
15 <label for="exampleInputEmail1">Title</label>
<input type="text" class="form-control" name="title" placeholder="Tit
16 </div>
17
18 <div class="form-group">
19 <label for="exampleInputFile">File input</label>
20 <input type="file" class="dropify" name="filefoto" data-height="300">
21
22 </div>
23
<button type="submit" class="btn btn-primary">Upload</button>
24 </form>
25
26 </div>
27 </div>
28
29 </div>
30
31
32 <script type="text/javascript" src="<?php echo base_url().'resources/js/jquery-3.2.1
<script type="text/javascript" src="<?php echo base_url().'resources/js/bootstrap.js
33 <script type="text/javascript" src="<?php echo base_url().'resources/dropify/js/drop
34
35 <script type="text/javascript">
36 $(document).ready(function(){
37 $('.dropify').dropify();
});
38
39 </script>
40 </body>
41 </html>
42
43
44
45
46
47
Now, go ahead and access our custom page

at http://localhost/dropify_upload/index.php/upload and you will see the

final result like this:

Input title and drag and drop to select image. You will see preview image

before upload.

like this:
And then, you can click upload button to upload image to server.

Awesome right?

So, that's it,

We've done it!

Don't worry, I won't leave you that soon, as we'll start dissecting each part

of the code now.

We'll start with the model file models/Upload_model.php as that's

something will be called from our controller methods.

There is one methods, upload_image.

It's used to save records to the gallery table in database.

1
function upload_image($title,$image){
2 $data = array(
3 'title' => $title,
4 'file_name' => $image,
5 );
6 $result=$this->db->insert('gallery',$data);
return $result;
7 }
8
Moving ahead, let's switch our attention to the controller file. Go ahead and

grab the code of the constructor method.

1 function __construct(){
2 parent::__construct();
3 $this->load->library('upload'); //load library upload
4 $this->load->model('upload_model'); //load model upload model
}
5
In order to use file upload in CodeIgniter, the first thing you need to do is to

load the upload library. And we can do it by using $this->load-

>library('upload').

We've also loaded the model upload_model, by using $this->load-

>model(‘upload_model’);

Next, Go ahead and grab the code of the index method.

1 function index(){
2 $this->load->view('upload_view');
3 }
This method is heart of out controller. It's used to call to the

view, upload_view.

Now, we're ready to go through the main method, do_upload method.

This methods will handle uploading file image to server.

1
2 function do_upload(){
3 $config['upload_path'] = './resources/uploads/'; //path folder
4 $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //Allowing types
5 $config['encrypt_name'] = TRUE; //encrypt file name
6
$this->upload->initialize($config);
7 if(!empty($_FILES['filefoto']['name'])){
8
9 if ($this->upload->do_upload('filefoto')){
10
11 $data = $this->upload->data();
12 $image = $data['file_name']; //get file name
13 $title = $this->input->post('title');
14 $this->upload_model->upload_image($title,$image);
15 echo "Upload Successful";
16
17 }else{
echo "Upload failed. Image file must be gif|jpg|png|jpeg|bmp";
18 }
19
20 }else{
21 echo "Failed, Image file is empty.";
22 }
23
24 }
25
Done.

Congratulations!

You did it. Now, you can create a upload application with dropify style file

upload using codeigniter.

If you feel this tutorial is useful for you. Please share! Perhaps, this tutorial

is useful also for your friend!

Thank you very much.