How to Upload Image and Create Thumbnail in CodeIgniter

How to Upload Image and Create Thumbnail in CodeIgniter

How to Upload Image and Create Thumbnail in CodeIgniter

0 Sales


The File Upload class in CodeIgniter aids in file uploading to the server. You may quickly upload files in CodeIgniter using the Upload library. The picture upload capability is mostly utilised in the online application. The CodeIgniter Upload module makes it simple to upload image files to a server.

The thumbnail is a tiny version of the picture that is utilised as a smaller copy on the web page. It is always advised in web applications to utilise a thumbnail to display a picture on the webpage. Thumbnail images assist to conserve bandwidth and speed up page load time. The thumbnail generation feature is quite beneficial for the picture upload capabilities. Before uploading a picture, use CodeIgniter's Image Manipulation class to resize it and produce a thumbnail. We will teach you how to upload an image and make a thumbnail in CodeIgniter in this article.

Examine the file structure before beginning to develop the image upload capability in CodeIgniter.

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



Set the helper that you would like to load constantly on every request in the config/autoload.php file. Set the URL helper to load automatically for this CodeIgniter picture upload script example.

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

Controller (Upload.php)

The Upload controller is in charge of picture uploading and resizing.

1. __construct() –

 - Define the upload directory path.

2. index() –

 - At first, the upload form display is displayed to receive image file input.

 - If the form is filled out.

      - The uploaded file input data is checked to see if the user chooses a file to upload.

      - Using the CodeIgniter Upload library, upload an image to the server.

      - Configure the Upload class's options.

           - upload path – The directory path where the file will be saved.

           - allowed types – The mime types of the files you wish to allow uploading.

 - The Upload library is used to conduct upload operations using the do upload() method.

 - Using the CodeIgniter Picture Manipulation package, resize the uploaded image and generate a thumbnail.

 - Configure the Image lib class's settings.

           - image library – The image library that will be used to manipulate images.

           - source image – The source image's absolute path.

           - new image – The absolute path to the image copy's location.

           - maintain ratio – Indicates if the original image's aspect ratio should be preserved.

           - width – Defines the image's width.

           - height – Defines the image's height.

      - Using the Image lib package, the resize() method is used to resize the original picture and generate a thumbnail image.

- Send the submitted picture and thumbnail information to the viewer.

defined('BASEPATH') OR exit('No direct script access allowed'); 
class Upload extends CI_Controller{ 
    function  __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 
                // 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 '<br/>Thumbnail created!'; 
                        $thumb_msg '<br/>'.$this->image_lib->display_errors(); 
                    $status 'success'; 
                    $status_msg 'Image has been uploaded successfully.'.$thumb_msg; 
                    $status 'error'; 
                    $status_msg 'The image upload has failed!<br/>'.$this->upload->display_errors('',''); 
                $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 




The index() operations of the Upload controller load this view file.

 - To pick an image file, an HTML form is presented.

 - The picture thumbnail is shown on the webpage if the file upload is successful.

<!-- 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">

<!-- 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 class="thumb">
            <img src="<?php echo base_url($thumbnail); ?>"/>
    <?php ?>


The Upload and Image lib libraries in CodeIgniter may be used to simply integrate image upload and thumbnail generating functions. Our sample uploader script will assist you in integrating picture upload capabilities with resize and thumbnail features in CodeIgniter. This uploader code may be used for a variety of reasons when an image file upload is required.


You can use it for personal or commercial projects. You can't resell it partially or in this form.


Create Date : Jan 22, 2022

Updated Date : Jan 23, 2022


Comments : 0

Downloads : 0