Codeigniter 4 File upload with Validation Example Tutorial

by

Using this Codeigniter 4 File upload with Validation Example Tutorial you will see how to upload images or files in Codeigniter with validaiton. CodeIgniter offers robust functionalities for handling file uploads and validating file types, sizes, and more.

Step 1 – Setting up CodeIgniter 4

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

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

Step 2 – Creating the File Upload Form

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

<!-- app/Views/file_upload.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeIgniter File Upload Validation - Itcodstuff.com</title>
</head>
<body>
    <h1>File Upload</h1>

    <?php if (session()->getFlashdata('success')): ?>
        <p><?= session()->getFlashdata('success') ?></p>
    <?php endif; ?>

    <?php if (session()->getFlashdata('error')): ?>
        <p><?= session()->getFlashdata('error') ?></p>
    <?php endif; ?>

    <?php if (session()->getFlashdata('errors')): ?>
        <ul>
            <?php foreach (session()->getFlashdata('errors') as $error): ?>
                <li><?= $error ?></li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>

    <form action="<?= site_url('file-upload/upload') ?>" method="post" enctype="multipart/form-data">
        <?= csrf_field() ?>
        <input type="file" name="file">
        <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 FileUploadController.php. Implement the following methods to handle file uploads with validation:

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class FileUploadController extends Controller
{
    public function index()
    {
        return view('file_upload');
    }

    public function upload()
    {
        $validationRule = [
            'file' => [
                'label' => 'File',
                'rules' => 'uploaded[file]'
                    . '|mime_in[file,image/jpg,image/jpeg,image/png]'
                    . '|max_size[file,2048]'
            ],
        ];

        if (!$this->validate($validationRule)) {
            return redirect()->back()->withInput()->with('errors', $this->validator->getErrors());
        }

        $file = $this->request->getFile('file');
        if ($file->isValid() && !$file->hasMoved()) {
            $file->move(WRITEPATH . 'uploads');
            return redirect()->back()->with('success', 'File has been uploaded');
        }

        return redirect()->back()->with('error', 'File upload failed');
    }
}

Step 5 – Defining Routes

Update the app/Config/Routes.php file to define routes for handling file upload requests:

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

Step 6 – 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 file upload feature in your web browser by entering http://localhost:8080/file-upload.