CodeIgniter 4 Image Upload Tutorial

CodeIgniter 4 provides built-in functions like getFiles(), move() and Validate() to handle image uploads with validation.

Let’s start to creating a simple image upload feature with validation in application:

Step 1 – Set up CodeIgniter 4

To download CodeIgniter 4 from the official website, Link:

Extract downloaded zip file in xampp/htdocs directory. and edit app/Config/App.php file, and set up base url in it:

public $baseURL = 'http://localhost/your-project/public';

Step 2 – Create Image Upload Form

Create a view file named upload_form.php in app/Views directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload In CodeIgniter with Validation - itcodstuff.com</title>
</head>
<body>
    <h1>Upload Image</h1>
    <?php if (isset($validation)): ?>
        <div>
            <?= $validation->listErrors() ?>
        </div>
    <?php endif; ?>
    <form action="/imageupload/upload" method="post" enctype="multipart/form-data">
        <?= csrf_field() ?>
        <div>
            <label for="image">Choose Image</label>
            <input type="file" name="image" id="image" required>
        </div>
        <button type="submit">Upload</button>
    </form>
</body>
</html>

Step 3 – Create Upload Directory

Run the following command to create upload and set permissions:

mkdir writable/uploads
chmod -R 777 writable/uploads

Step 4 – Create Controller Class

Go to app/controllers directory, and create a controller file named ImageUpload.php, and create methods in it to handle image upload with validation:

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class ImageUpload extends Controller
{
    public function index()
    {
        return view('upload_form');
    }

    public function upload()
    {
        $validationRule = [
            'image' => [
                'label' => 'Image File',
                'rules' => 'uploaded[image]'
                    . '|is_image[image]'
                    . '|mime_in[image,image/jpg,image/jpeg,image/gif,image/png,image/webp]'
                    . '|max_size[image,2048]', // Max size 2MB
            ],
        ];

        if (!$this->validate($validationRule)) {
            $data['validation'] = $this->validator;
            return view('upload_form', $data);
        }

        $img = $this->request->getFile('image');

        if (!$img->hasMoved()) {
            $newName = $img->getRandomName();
            $img->move(WRITEPATH . 'uploads', $newName);

            $data = [
                'fileName' => $newName,
                'filePath' => WRITEPATH . 'uploads/' . $newName,
                'fileUrl' => base_url('writable/uploads/' . $newName)
            ];

            return view('upload_success', $data);
        }

        throw new \RuntimeException('The file has already been moved.');
    }
}

Step 5 – Display Uploaded Image

Create a view file named upload_success.php in app/Views/:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Success</title>
</head>
<body>
    <h1>Upload Successful</h1>
    <p>File uploaded successfully.</p>
    <p>File Name: <?= $fileName ?></p>
    <p>File Path: <?= $filePath ?></p>
    <p><img src="<?= $fileUrl ?>" alt="Uploaded Image" width="200"></p>
    <p><a href="/">Upload Another Image</a></p>
</body>
</html>

Step 6 – Define Routes

Edit app/Config/Routes.php and define the routes to handle form submission using ajax requests:

$routes->get('/', 'ImageUpload::index');
$routes->post('imageupload/upload', 'ImageUpload::upload');

Step 7 – Test Application

Run the following command to start application server:

cd /your-project
php spark serve

Open your browser and type to http://localhost:8080/ url in it to test this application.