Codeigniter 4 File Upload Validation Example

by

Codeigniter 4 File Upload Validation Example tutorial will show you how to upload file & images in Codeigniter with validation. CodeIgniter 4 boasts a robust set of features tailored for seamless file upload operations, complete with comprehensive validation capabilities for file types and sizes. This guide walks you through setting up a file upload feature with validation in your application:

Step 1: Setup CodeIgniter 4 Environment

To initiate, download CodeIgniter 4 from the official website and extract the contents into your xampp/htdocs directory. Adjust the baseURL in app/Config/App.php to match your local environment:

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

Step 2: Creating the File Upload Form

Begin by crafting a view file, file_upload.php, within the app/Views directory. This form will facilitate seamless file uploads while providing user-friendly validation feedback:

<!-- 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 with Validation - YourWebsite.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: Establishing the Upload Directory

Create a writable directory for uploads and set appropriate permissions to ensure seamless file storage:

mkdir writable/uploads
chmod -R 777 writable/uploads

Step 4: Developing the Controller Logic

Craft a controller, FileUploadController.php, under app/Controllers, to manage file uploads and 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 successfully.');
        }

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

Step 5: Configuring Routes

In app/Config/Routes.php, define routes for accessing the file upload functionality:

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

Step 6: Testing Your Application

Validate your setup by launching the application server using:

cd /your-project
php spark serve

Navigate to http://localhost:8080/file-upload in your browser to commence testing your newly implemented file upload feature with validation.