Reading Time: 4 minutes

20 Views

File uploading is a common feature in web applications — and sometimes you’ll need to upload multiple files at once. CodeIgniter 4 Multi-File Upload makes handling this process clean and efficient with built-in file validation features.

In this guide, we’ll set up a simple, secure multi-file upload system that validates each file for size and type before saving it to the server.

Let’s get started.

⚪ What is Multi-File Upload?

A multi-file upload allows users to select and submit multiple files through a single form field, instead of uploading one file at a time. This is commonly used for image galleries, document bundles, or multi-attachment forms.

It improves user experience and reduces the number of upload actions required.

⚪ Creating the Controller

We can manually create a controller or use Spark CLI to quickly generate one for our CodeIgniter 4 Multi-File Upload system:

php spark make:controller UploadController

This command creates:

app/Controllers/UploadController.php

with a basic class structure ready for your code.

Then, update the controller with our multi-file upload logic:

<?php
namespace App\Controllers;

use CodeIgniter\Controller;

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

    public function uploadMultipleFiles()
    {
        $validationRule = [
            'files' => [
                'label' => 'Files',
                'rules' => 'uploaded[files.0]|max_size[files,1024]|ext_in[files,jpg,jpeg,png,pdf]'
            ]
        ];

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

        $files = $this->request->getFiles();

        foreach ($files['files'] as $file) {
            if ($file->isValid() && ! $file->hasMoved()) {
                $file->move(WRITEPATH . 'uploads');
            }
        }

        return redirect()->to('/upload-files')->with('success', 'Files uploaded successfully.');
    }
}

Explanation:

validate() checks the multi-file upload inputs for size (1MB max) and allowed types (jpg, jpeg, png, pdf).
If validation fails, it redirects back with errors.
If successful, it moves each uploaded file to writable/uploads.

⚪ Creating the View

Create a simple multi-file upload form in app/Views/upload_form.php,

<h2>Upload Multiple Files</h2>

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

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

<form action="<?= site_url('upload-files') ?>" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple><br>
    <button type="submit">Upload</button>
</form>

Explanation:

The form uses multipart/form-data to support file uploads.
files[] allows users to select multiple files for the upload.
Flashdata displays validation errors and success messages after uploads.

⚪ Setting Up Routes

Routes define which URL triggers which controller method.

In app/Config/Routes.php, add:

$routes->get('upload-files', 'UploadController::index');
$routes->post('upload-files', 'UploadController::uploadMultipleFiles');

get('upload-files') loads the multi-file upload form.
post('upload-files') handles the multi-file upload submission and processing.

⚪ Conclusion

With just a few lines of clean code, we created a working CodeIgniter 4 Multi-File Upload system. We validated files for size and type, and safely moved them to the server directory. You can now easily integrate this into any CodeIgniter 4 project and extend validations as needed.

Using Spark CLI made it quicker to generate the controller boilerplate. Routes cleanly map requests to controller methods, and validation rules ensure security and reliability while handling multi-file uploads.