Codeigniter 4 Image Upload, Compress, Resize, Rotate Tutorial

The thorough guide on using image manipulation in Codeigniter 4 application previously saw how to resize an image using the image manipulation service in Codeigniter.

In this tutorial, we will share a realistic idea of uploading the image, validating the image, resizing the image, and rotating the image in Codeigniter 4 using the same image manipulation class.

Codeigniter’s Image manipulation might be used for customizing the images; with this magical class, you can:

  • Resize the image in Codeigniter
  • Compress image in Codeigniter
  • Create or generate image thumbnail in Codeigniter
  • Crop image in Codeigniter
  • Rotate image file in Codeigniter
  • Add text overlay on the image in Codeigniter

Codeigniter 4 Image Resize and Rotate After Upload Example

  • Step 1: Install New Codeigniter App
  • Step 2: Add CI App to Database
  • Step 3: Create New Table with SQL Query
  • Step 4: Set Up Controller File
  • Step 5: Add Routes in Route File
  • Step 6: Create and Set up View File
  • Step 7: Test App in Browser

Install New Codeigniter App

You may use the install app using Composer command or a direct link.

https://www.codeigniter.com/download

Once the app is downloaded, unzip the package, change the project’s name, and keep the project folder in the server directory.

Execute the provided command to download the app.

composer create-project codeigniter4/appstarter

Add App to Database

In this step, you have to go to app/Config/Database.php file and add the required database name, username, and password within the database configuration file.

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'db_username',
        'password' => 'db_password',
        'database' => 'db_name',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

Create New Table with SQL Query

In this section, you will see how to use the SQL command to create a new table in the database.

CREATE TABLE clients (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    file_name varchar(255) NOT NULL COMMENT 'Name',
    file_type varchar(255) NOT NULL COMMENT 'File',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Set Up Controller File

Now, we have to set up a controller file to integrate the image manipulation class to resize, compress, rotate an image, create a controller file.

Update the provided code in app/Controllers/ImgResizeController.php.

<?php 

namespace App\Controllers;
use CodeIgniter\Controller;


class ImgResizeController extends Controller
{
    
  public function index() { 
    return view('client');
 }
   
 public function store() {
      helper(['form', 'url']); 

      $database = \Config\Database::connect();
      $db = $database->table('clients');
   
      $fileValidation = $this->validate([
          'file' => [
              'uploaded[file]',
              'mime_in[file,image/png,image/jpg,image/jpeg,image/gif]',
              'max_size[file,4096]',
          ]
      ]);
       
      if (!$fileValidation) {
          print_r('Max 4mb file size is allowed.');
      } else {
          $isFile = $this->request->getFile('file');
          $image = \Config\Services::image()
              ->withFile($isFile)
              ->fit(120, 120, 'left')
              ->rotate(90)
              ->save(FCPATH .'/thumbnail/'. $isFile->getRandomName());

          $isFile->move(WRITEPATH . 'uploads');

          $fileData = [
              'file_name' =>  $isFile->getName(),
              'file_type'  => $isFile->getClientMimeType()
          ];

          $store = $db->insert($fileData);
          print_r('Image has resized and thumbnail been generated!');
      } 
 }

}

Add Routes in Route File

Head over to the app/Config/Routes.php file, set a new route for opening the app in the browser in conjunction with ImgManipulationController.

/*
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
*/

$routes->setDefaultController('ImgResizeController');

$routes->get('/image-manipulation', 'ImgResizeController::index');

Create and Set up View File

In this final section, you have to create client.php, step inside the app/views/ folder and create a client.php file. Afterwards, add the given code into your view file.

Update code in app/Views/client.php file.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Codeigniter 4 Image Manipulation Example</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

	<div class="container">
		<form action='<?php echo base_url(); ?>/ImgResizeController/store' method='post' 
		enctype='multipart/form-data'>

			<div class="form-group">
				<input class="form-control form-control" type="file" name="file">
			</div>

			<div class="mt-2">
				<input type="submit" value="Resize + Upload" class="btn btn-dark" />
			</div>
		</form>
	</div>
</body>

</html>

Run App in Browser

Type the suggested command in the command prompt, execute it to start the development server.

php spark serve

We need to keep the thumbnails in the folder after generating, so create a ‘thumbnail’ folder for storing the compressed images.

Here is the path, app/public/thumbnail:

Make sure to use the given url to view your application.

http://localhost:8080/image-manipulation

Codeigniter 4 Resize Image and Create Thumbnail Tutorial

Summary

We have checked every nuance with utmost precision in this article; at the end of this tutorial, we assume by now you have exactly known how to compress image size, upload it to the Codeigniter app and database, generate a thumbnail, or how to have at least the basic understanding of using image manipulation class in Codeigniter app.