Codeigniter 4 image upload Tutorial

by

In this tutorial you will see how to upload images in Codeigniter. This Codeigniter image upload Tutorial show you step by step to uploading image and save in database with validation.

Step 1 – Setting up CodeIgniter 4

Start by downloading CodeIgniter 4 from the official website. After downloading, extract the zip file into your xampp/htdocs directory. Then, open the app/Config/App.php file and set the base URL:

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

Step 2 – Creating the Image Upload Form

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

<!-- app/Views/upload_form.php -->
<!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 – Creating the Upload Directory

Run the following commands in your terminal to create the upload directory and set appropriate permissions:

mkdir writable/uploads
chmod -R 777 writable/uploads

Step 4 – Creating the Controller Class

Navigate to the app/controllers directory and create a new controller file named ImageUpload.php. Implement the following methods to handle image uploads 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 – Displaying Uploaded Image

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

<!-- app/Views/upload_success.php -->
<!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 – Defining Routes

Update the app/Config/Routes.php file to define routes for handling form submission using AJAX requests:

// app/Config/Routes.php
$routes->get('/', 'ImageUpload::index');
$routes->post('imageupload/upload', 'ImageUpload::upload');

Step 7 – Testing the Application

To run the application, navigate to your project directory and start the server using the following command:

cd /your-project
php spark serve

Access the image upload feature in your web browser by entering http://localhost:8080/.