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 to use 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.

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

Config

autoload.php
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 to upload.
    • 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.

<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 
 
class Upload extends CI_Controller{ 
     
    function  __construct(){ 
        parent::__construct(); 
         
        // File upload path 
        $this->uploadPath = 'uploads/images/'; 
    } 
     
    function index(){ 
        $thumb_msg = $status = $status_msg = $thumbnail = $org_image_size = $thumb_image_size = ''; 
        $data = array(); 
 
        // If the file upload form submitted 
        if($this->input->post('submit')){ 
            if(!empty($_FILES['image']['name'])){ 
                // File upload config 
                $config['upload_path']   = $this->uploadPath; 
                $config['allowed_types'] = 'jpg|jpeg|png'; 
                 
                // Load and initialize upload library 
                $this->load->library('upload', $config); 
                 
                // Upload file to server 
                if($this->upload->do_upload('image')){ 
                    $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 
                    $this->load->library('image_lib', $config); 
                     
                    // Resize image and create thumbnail 
                    if($this->image_lib->resize()){ 
                        $thumbnail = $thumb_path.$uploadedImage; 
                        $thumb_image_size = $thumb_width.'x'.$thumb_height; 
                        $thumb_msg = '<br/>Thumbnail created!'; 
                    }else{ 
                        $thumb_msg = '<br/>'.$this->image_lib->display_errors(); 
                    } 
                     
                    $status = 'success'; 
                    $status_msg = 'Image has been uploaded successfully.'.$thumb_msg; 
                }else{ 
                    $status = 'error'; 
                    $status_msg = 'The image upload has failed!<br/>'.$this->upload->display_errors('',''); 
                } 
            }else{ 
                $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->load->view('upload/index', $data); 
    } 
}

View

upload/index.php
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.

<!-- File upload form -->
<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">
</form>

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

Upload Multiple Files and Images in CodeIgniter

Conclusion

The image upload and thumbnail creation functionality can be easily integrated using the Upload and Image_lib library in CodeIgniter. Our example uploader script helps you to integrate image upload functionality in CodeIgniter with resize and thumbnail features. You can use this uploader code for multiple purposes where image file upload is required.