The File Upload class in CodeIgniter makes it easy to upload files to the server. You may quickly upload files in CodeIgniter using the Upload library. In most cases, the web application uses the picture upload functionality. The CodeIgniter Upload library makes it simple to upload an image file to a server.

The thumbnail is a tiny version of the image that is displayed on the web page as a smaller replica. When displaying an image on a webpage in a web application, it’s always best to utilise a thumbnail. Thumbnail images assist save bandwidth and speed up page loading. The ability to create thumbnails is quite beneficial when using the image upload feature. The Image Manipulation class in CodeIgniter allows you to resize images and produce thumbnails before uploading them. In this article, we’ll show you how to use CodeIgniter to upload an image and make a thumbnail.

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

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

Config 

autoload.php
Specify the helper you wish to load automatically on every request in the config/autoload.php file. Set the URL helper to load automatically in this CodeIgniter picture upload script.

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

Controller (Upload.php)
The Upload controller is in charge of picture upload and resizing.

__construct() – Define the upload directory’s path.
index() – The upload form view is initially loaded to receive image file input.
If you fill out the form and submit it, you will receive a confirmation email.

The uploaded file input data is checked to see if the user has chosen a file to upload.
Using the CodeIgniter Upload library, upload an image to the server.
Set the Upload class’s options.
upload path – The directory in which the file will be saved.
allowed types – The file’s mime types that you want to allow uploading.
The Upload library’s do upload() function is used to perform upload operations.
Using the CodeIgniter Image Manipulation library, resize the uploaded image and create a thumbnail.

Set the Image lib class’s options.
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 save the image copy.
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 library, the resize() function is used to resize the original image and create a thumbnail image.
The view will receive the uploaded image and thumbnail information.

<?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
The index() operations of the Upload controller load this view file.

To choose an image file, an HTML form is provided.
The image thumbnail is displayed 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">
</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>

Note:

The Upload and Image lib libraries in CodeIgniter make it simple to incorporate image upload and thumbnail creation. Our sample uploader script demonstrates how to use CodeIgniter to add image upload capabilities, including resize and thumbnail options. This uploader code can be used for a variety of tasks that involve the uploading of an image file.