Codeigniter Tutorial Compress and Resize Uploaded Image (Version 4)

Today you will talk about CodeIgniter tutorial compress and resize uploaded image in version 4 apps. You’ll also learn how to use the CodeIgniter 4 program to compress, resize, and modify picture sizes before uploading them to the database. 

This updated tech guide CodeIgniter tutorial compress and resize uploaded image is mainly focused on version 4 of the application. Furthermore, in CodeIgniter you can also compress any image type, including PNG, JPG, JPEG, and GIF. 

For similar tutorial like this, we recommend you check out Windows 11 ISO download 32 bit & 64 bit Wiki.

Let us get on with the CodeIgniter tutorial compress and resize uploaded image tutorial.

CodeIgniter Tutorial Compress and Resize Uploaded Image

You may simply compress image size in CodeIgniter by following the instructions below:

  • In step 1 you have to get the most recent version of CodeIgniter.
  • Do basic configurations as per your needs in step 2.
  • In step 3 you will create a table in the database.
  • After that, setup database credentials in Step 4.
  • Now, create an Image Resize Controller in Step 5.
  • Then, create an Image Upload Form View in Step 6
  • Finally, start the development server in step 7.

Since you have an idea about this CodeIgniter Tutorial Compress and Resize Uploaded Image guide. Now let us get into the complete details of this CodeIgniter tutorial about how to compress image size in CodeIgniter.

Download CodeIgniter Project Application

You will learn about how to download CodeIgniter 4 along with how to install CodeIgniter in this stage of the tutorial.

  • Firstly, you have to go to the official website of CodeIgniter for further information.
  • There, you can get the latest CodeIgniter 4 download file.
  • That file you need to unzip under xampp/htdocs/ on your local machine.
  • Also, I recommend you to update the name of the download folder to “demo.”

Basic Configurations of CodeIgniter 4

After the first step, you have to specify some basic CodeIgniter 4 configurations on the app/config/app.php file. For that, you have to navigate to application/config/config.php and open it in a text editor.

Here, copy the base URL as shown below:

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

CodeIgniter Create Table in Database

You have to first build a CodeIgniter database with the name demo in this stage. To do that, open PhpMyAdmin and create the database for CodeIgniter with the name demo. After you’ve successfully created a database for CodeIgniter, execute the SQL statement below to create a crop_images table in it.

CREATE TABLE files(
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    type varchar(255) NOT NULL COMMENT 'File Type',
    created_at varchar(20) NOT NULL COMMENT 'Created date',
    PRIMARY KEY (id)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='demo table' AUTO_INCREMENT=1;

Setup CodeIgniter Database Credentials

You must connect our project to the database in this stage. Open the database.php file in a text editor by going to app/Config/Database.php. You must set up database credentials in this file after opening it in a text editor, as shown below.

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

In CodeIgniter, Create Image Resize Controller

Create a controller named ImageUploadController.php in app/Controllers in this stage. Then paste in the following code:

<?php
namespace App\Controllers;

use CodeIgniter\Controller;

class ImageUploadController extends Controller {

public function index() {

return view('imageUploadForm');

}

public function upload() {

helper(['form', 'url']);

// access database

$database = \Config\Database::connect();

$db = $database->table('files');

// file validation

$isValidFile = $this->validate([

'file' => [

'uploaded[file]',

'mime_in[file,image/jpg,image/jpeg,image/png,image/gif]',

'max_size[file,4096]',

]

]);

// check validation

if (!$isValidFile) {

print_r('Upload valid file upto 4mb size');

} else {

$imgPath = $this->request->getFile('file');

// Image manipulation

$image = \Config\Services::image()

->withFile($imgPath)

->resize(200, 100, true, 'height')

->save(FCPATH .'/images/'. $imgPath->getRandomName());

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

$fileData = [

'name' => $imgPath->getName(),

'type' => $imgPath->getClientMimeType()

];

$store = $db->insert($fileData);

print_r('Image has been successfully resized');

}

}

} ?>

Create Image Upload Form View

To complete this step, navigate to the application/views/ directory and create the imageUploadFormphp file. Just paste the HTML code below into your files:

<!DOCTYPE html>
<html>
<head>
<title>Codeigniter Compress Image Size Example - Tutsmake.com</title>
</head>
<body>
<?php echo $error;?>
<form method='post' action='/ImageUploadController/upload' enctype='multipart/form-data'>
<input type="file" name="file" size="20" />
<input type="submit" value="upload" />
</form>
</body>
</html>

Finally, Start Development Server

Open your terminal and type the following command to start the development server:

php spark serve

Then, in your browser, type the following into the address bar to start working with CodeIgniter 4 version:

http://localhost:8080/

That was the final step in this CodeIgniter Tutorial Compress and Resize Uploaded Image article.

What is CodeIgniter?

CodeIgniter is a lightweight PHP framework designed for developers that require a simple and elegant toolkit to build full-featured web applications. EllisLab developed CodeIgniter, which is now a project of the British Columbia Institute of Technology.

Please note that the above-mentioned code is not to be executed as it is. Kindly update the code as per your needs and requirements.

You might also want to read about Codeigniter 4 CRUD Generator bootstrap and MySQL example.

Leave a Comment

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