Upload Image and Create Thumbnail in CodeIgniter

CodeIgniter’s File Upload class helps to upload files to the server. With the Upload library, you can easily upload file in CodeIgniter. Mostly the image upload functionality is used in the web application. CodeIgniter Upload library provides the easiest way to upload image file to server.

The thumbnail is a reduced-size version of the image that used as a smaller copy to display on the web page. In the web application, it’s always recommended using a thumbnail to display an image on the webpage. Thumbnail helps to save bandwidth and reduce page load time. The thumbnail creation is very useful for the image upload functionality. CodeIgniter’s Image Manipulation class helps to resize image and create thumbnail before upload. In this tutorial, we will show you how to upload image and create thumbnail in CodeIgniter.

Before getting started to implement the image upload functionality in CodeIgniter, take a look at the file structure.

├── application/
│   ├── controllers/
│   │   └── Upload.php
│   └── views/
│       └── upload/
│           └── index.php
└── uploads/
    └── images/
        └── thumb/


In the config/autoload.php file, specify the helper which you want to load automatically on every request. For this example CodeIgniter image upload script, specify the URL helper to load automatically.

$autoload['helper'] = array('url');

Controller (Upload.php)

The Upload controller handles the image upload and resize functionality.

  • __construct() –
    • Define the path of the upload directory.
  • index() –
    • Initially, the upload form view is loaded to receive input of the image file.
    • If the form is submitted,
      • The posted file input data is validated to check whether the user selects a file to upload.
      • Upload image to the server using CodeIgniter Upload library.
      • Set preferences for the Upload class.
        • upload_path – The path of the directory where the file will be stored.
        • allowed_types – The mime types of the file which you want to allow uploading.
      • The do_upload() function is used to perform upload operation using the Upload library.
      • Resize the uploaded image and create thumbnail using the CodeIgniter Image Manipulation library.
      • Set preferences for Image_lib class
        • image_library – The image library to be used for image manipulation.
        • source_image – Absolute path of the source image.
        • new_image – Absolute path where the image copy will be saved.
        • maintain_ratio – Specify whether to maintain the aspect ratio of the original image.
        • width – Set width of the image.
        • height – Set height of the image.
      • The resize() function is used to resize the original image and create a thumbnail image using the Image_lib library.
    • Pass the uploaded image and thumbnail info to the view.
defined('BASEPATH') OR exit('No direct script access allowed'); 

Upload extends CI_Controller{
// File upload path
$this->uploadPath 'uploads/images/';
$thumb_msg $status $status_msg $thumbnail $org_image_size $thumb_image_size '';
$data = array();

// If the file upload form submitted
// File upload config
$config['upload_path']   = $this->uploadPath;
$config['allowed_types'] = 'jpg|jpeg|png';
// Load and initialize upload library
// Upload file to server
$uploadData $this->upload->data();
$uploadedImage $uploadData['file_name'];
$org_image_size $uploadData['image_width'].'x'.$uploadData['image_height'];
$source_path $this->uploadPath.$uploadedImage;
$thumb_path $this->uploadPath.'thumb/';
$thumb_width 280;
$thumb_height 175;
// Image resize config
$config['image_library']    = 'gd2';
$config['source_image']     = $source_path;
$config['new_image']         = $thumb_path;
$config['maintain_ratio']     = FALSE;
$config['width']            = $thumb_width;
$config['height']           = $thumb_height;
// Load and initialize image_lib library
// Resize image and create thumbnail
$thumbnail $thumb_path.$uploadedImage;
$thumb_image_size $thumb_width.'x'.$thumb_height;
$thumb_msg '
Thumbnail created!'
$thumb_msg '
$status 'success';
$status_msg 'Image has been uploaded successfully.'.$thumb_msg;
$status 'error';
$status_msg 'The image upload has failed!
$status 'error';
$status_msg 'Please select a image file to upload.'
// File upload status
$data['status'] = $status;
$data['status_msg'] = $status_msg;
$data['thumbnail'] = $thumbnail;
$data['org_image_size'] = $org_image_size;
$data['thumb_image_size'] = $thumb_image_size;
// Load form view and pass upload status


This view file is loaded by the index() functions of the Upload controller.

  • An HTML form is displayed to select an image file.
  • If file upload is successful, the image thumbnail is displayed on the webpage.

<form action="" method="post" enctype="multipart/form-data">
    <label>Choose Image File:label>
    <input type="file" name="image">
    <input type="submit" name="submit" value="UPLOAD">

<div class="result">
    if(!empty($status)){ ?>
        <p class="status-msg echo $status?>">echo $status_msg?>p>
    if(!empty($thumbnail)){ ?>
     if(!empty($thumbnail)){ ?>
        <div class="info">
            <p>Original Image Size: echo $org_image_size?>p>
            <p>Created Thumbnail Size: echo $thumb_image_size?>p>
        <div class="thumb">
            <img src="echo base_url($thumbnail); ?>"/>

Related Articles

Comments 0