Upload Image using CodeIgniter with MySQL

File upload functionality is one of the most common requirements for most of the web applications. Codeigniter file upload library is very simple to use. CodeIgniter’s File Uploading Class permits files to be uploaded. You can set various preferences, restricting the type and size of the files. Follow the steps shown in the given example to understand the file uploading process in CodeIgniter.

Step 1: Create MySQL Database and Table

<?php
  //Table structure for table `picture`
  CREATE TABLE `picture` (
    `id` int(11) NOT NULL,
    `url` int(255) NOT NULL
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

  // Indexes for table `picture`
  ALTER TABLE `picture` ADD PRIMARY KEY (`id`);

  //AUTO_INCREMENT for table `picture`
  ALTER TABLE `picture`  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
?>

<?php

//Table structure for table `picture`

CREATE TABLE `picture` (

`id` int(11) NOT NULL,

`url` int(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

// Indexes for table `picture`

ALTER TABLE `picture` ADD PRIMARY KEY (`id`);

//AUTO_INCREMENT for table `picture`

ALTER TABLE `picture` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Step 2: Create a model file

Create a model file named “Upload_model.php” inside “application/models” folder.

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of Upload Model: CodeIgniter Upload image with MySQL
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 */
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Upload_model extends CI_Model {
    private $_ID;
    private $_url;

    public function setID($ID) {
        $this->_ID = $ID;
    }

    public function setURL($url) {
        $this->_url = $url;
    }
    // get image
    public function getPicture() {        
        $this->db->select(array('p.id', 'p.url'));
        $this->db->from('picture p');  
        $this->db->where('p.id', $this->_ID);     
        $query = $this->db->get();
       return $query->row_array();
    }
    // insert image
    public function create() { 
        $data = array(
            'url' => $this->_url,
        );
        $this->db->insert('picture', $data);
        return $this->db->insert_id();
    }
}
?>

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

/**

* Description of Upload Model: CodeIgniter Upload image with MySQL

* @author TechArise Team

* @email info@techarise.com

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Upload_model extends CI_Model {

private $_ID;

private $_url;

public function setID($ID) {

$this->_ID = $ID;

}

public function setURL($url) {

$this->_url = $url;

}

// get image

public function getPicture() {

$this->db->select(array('p.id', 'p.url'));

$this->db->from('picture p');

$this->db->where('p.id', $this->_ID);

$query = $this->db->get();

return $query->row_array();

}

// insert image

public function create() {

$data = array(

'url' => $this->_url,

);

$this->db->insert('picture', $data);

return $this->db->insert_id();

}

Step 3: Update constants file

Add code the file application/config/constants.php in your CodeIgniter installation with you controller’s name.

<?php
  $root = "http://" . $_SERVER['HTTP_HOST'];
  $root .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);
  $constant['base_url'] = $root; 
  define('HTTP_UPLOAD_PATH', $constant['base_url'] . 'assets/uploads/');
  define('ROOT_UPLOAD_PATH', BASH_PATH . 'assets/uploads/');
?>

<?php

$root = "http://" . $_SERVER['HTTP_HOST'];

$root .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);

$constant['base_url'] = $root;

define('HTTP_UPLOAD_PATH', $constant['base_url'] . 'assets/uploads/');

define('ROOT_UPLOAD_PATH', BASH_PATH . 'assets/uploads/');

Step 4: Create a controller file

Next create a controller file named “Image.php” inside “application/controllers” folder.

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * @package Image :  CodeIgniter Upload Image with MySQL
 *
 * @author TechArise Team
 *
 * @email info@techarise.com
 *   
 * Description of Upload Image Controller
 */
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Image extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Upload_model', 'upl');
    }
    // upload image
    public function index() {
        $data['page'] = 'image-img';
        $data['title'] = 'Upload Image | TechArise';         
        $this->load->view('img/index', $data);
    }    
    // action save method
    public function save() {
        $path = ROOT_UPLOAD_PATH;
        // Define file rules
        $initialize = $this->upload->initialize(array(
            "upload_path" => $path,
            "allowed_types" => "gif|jpg|jpeg|png|bmp",
            "remove_spaces" => TRUE
        ));
        $imagename = 'no-img.jpg';
        if (!$this->upload->do_upload('imageURL')) {
            $error = array('error' => $this->upload->display_errors());
            echo $this->upload->display_errors();
        } else {
            $data = $this->upload->data();
            $imagename = $data['file_name'];
            $this->upl->setURL($imagename);            
            $this->upl->create();                           
            $this->session->set_flashdata('img_uploaded_msg', '<div class="alert alert-success">Image uploaded successfully!</div>');
            $this->session->set_flashdata('img_uploaded', $imagename);
            redirect('/');
        }            
    }    
}
?>

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

/**

* @package Image : CodeIgniter Upload Image with MySQL

* @author TechArise Team

* @email info@techarise.com

* Description of Upload Image Controller

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Image extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Upload_model', 'upl');

}

// upload image

public function index() {

$data['page'] = 'image-img';

$data['title'] = 'Upload Image | TechArise';

$this->load->view('img/index', $data);

}

// action save method

public function save() {

$path = ROOT_UPLOAD_PATH;

// Define file rules

$initialize = $this->upload->initialize(array(

"upload_path" => $path,

"allowed_types" => "gif|jpg|jpeg|png|bmp",

"remove_spaces" => TRUE

));

$imagename = 'no-img.jpg';

if (!$this->upload->do_upload('imageURL')) {

$error = array('error' => $this->upload->display_errors());

echo $this->upload->display_errors();

} else {

$data = $this->upload->data();

$imagename = $data['file_name'];

$this->upl->setURL($imagename);

$this->upl->create();

$this->session->set_flashdata('img_uploaded_msg', '<div class="alert alert-success">Image uploaded successfully!</div>');

$this->session->set_flashdata('img_uploaded', $imagename);

redirect('/');

}

Step 5: Create a view

Create a view file named “index.php” inside “application/views/img” folder

<?php
$this->load->view('templates/header');
?>
<div class="row">
    <div class="col-lg-12">
        <h2>Upload Image using CodeIgniter with MySQL</h2>                 
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-lg-12">
        <?php echo $this->session->flashdata('img_uploaded_msg'); ?>                      
    </div>
</div><!-- /.row -->
<?php if(empty($this->session->flashdata('img_uploaded'))) { ?>
<div class="row">
    <form action="<?php echo site_url();?>image/save" class="img-upl-validation" id="img-upl-validation" enctype="multipart/form-data" method="post" accept-charset="utf-8">  
    <div class="col-lg-6">
    </div> 
        <div class="col-lg-6">   
            <div class="form-group">
                <label for="image">Upload Image</label>
                <input type="file" name="imageURL" id="url" class="filestyle" data-icon="false" data-buttontext="Choose image">
            </div>                        
        </div>
        <div class="col-lg-12 col-sm-12"> 
            <div class="form-group text-right padT">
                <button type="submit" name="upload_file" id="upload-file" value="upl-img" class="btn btn-primary mrgT">Upload</button>
            </div>
        </div>
    </form>
</div><!-- /.row -->
<?php } else { ?>
<div class="container">
  <h2>Images</h2>  
    <img width="700" height="400" class="img-thumbnail" src="<?php print HTTP_UPLOAD_PATH.$this->session->flashdata('img_uploaded');?>">    
</div>    
<?php } ?>
<?php
$this->load->view('templates/footer');
?>

<?php

$this->load->view('templates/header');

<h2>Upload Image using CodeIgniter with MySQL</h2>

</div>

</div>

<?php echo $this->session->flashdata('img_uploaded_msg'); ?>

</div>

</div>

<?php if(empty($this->session->flashdata('img_uploaded'))) { ?>

<form action="<?php echo site_url();?>image/save" class="img-upl-validation" id="img-upl-validation" enctype="multipart/form-data" method="post" accept-charset="utf-8">

</div>

<label for="image">Upload Image</label>

</div>

<button type="submit" name="upload_file" id="upload-file" value="upl-img" class="btn btn-primary mrgT">Upload</button>

</div>

</form>

</div>

<?php } else { ?>

<h2>Images</h2>

<img width="700" height="400" class="img-thumbnail" src="<?php print HTTP_UPLOAD_PATH.$this->session->flashdata('img_uploaded');?>">

</div>

<?php } ?>

<?php

$this->load->view('templates/footer');

Demo Download