Upload and Resize Image using Codeigniter

This tutorial will show you how to upload an image and resize the image using Codeigniter. CodeIgniter’s File Uploading Class permits files to be uploaded. You can set various preferences, restricting the type and size of the files.

Uploading a file involves the following general process:

An upload form is displayed, allowing a user to select a file and upload it.
When the form is submitted, the file is uploaded to the destination you specify.
Along the way, the file is validated to make sure it is allowed to be uploaded based on the preferences you set.
Once uploaded, the user will be shown a success message.

CodeIgniter’s Image Manipulation class lets you perform the following actions:

Image Resizing
Thumbnail Creation
Image Cropping
Image Rotating
Image Watermarking

Netbeans 8.1
XAMPP in Windows
Codeigniter 3.0.6

Configure XAMPP and Netbeans

From Netbeans IDE go to Tools->Options. Click on PHP. Now on tab “General” browse the file for “PHP 5 Interpreter”. The php interpreter file generally placed inside the <physical drive in Windows OS>:xamppphpphp.exe

Configure Codeigniter and Netbeans

Create a new PHP project in Netbeans. Then remove the index.php file from the newly created project. Now copy the extracted files from Codeigniter 3.0.6 to the newly created project directory.

Directory Structure

A typical directory structure for the project would be as shown below. Here upload directory will contain the uploaded image file.
image upload resize codeigniter

Step 1. Now modify <root directory>/application/config/autoload.php file for auto-loading html, url, file and form

Step 2. Create a view file under <root directory>/application/views which will be used for uploading image displaying resized image

Read also Upload and Rotate Image using Codeigniter and Upload and Crop Image using Codeigniter

Step 3. Create a Controller class under <root directory>/application/controllers for handling client’s request and response

If you prefer not to set preferences using method $this->load->library(‘image_lib’, $config), you can instead put them into a config file. Simply create a new file called image_lib.php, add the $config array in that file. Then save the file in config/image_lib.php and it will be used automatically.

Step 4. Now modify <root directory>/application/config/routes.php file for pointing the default controller class

Step 5. Now if everything is fine run the application, you will see below output in the browser

image upload, resize codeigniter

Step 6. Now browse and select an image file, the file will be uploaded to <root directory>/application/upload directory with reduced size and the resized image will be displayed on browser

image upload resize codeigniter

image upload resize codeigniter

Thanks for reading.


Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.