Upload Multiple File in CodeIgniter 4 using Ajax

In CodeIgniter 4 projects, jQuery library and Ajax method helps developers to implement multiple file upload feature, and with this feature multiple files can be uploaded without page refresh in projects.

Let’s start creating a codeIgniter 4 ajax multiple file upload application:

Step 1 – Set Up CodeIgniter 4 Project

Run the following command to install codeIgniter 4 application:

composer create-project codeigniter4/appstarter codeigniter4-files

Step 2 – Configure Project

Edit the .env file from root directory of project and set the app.baseURL:

app.baseURL = 'http://localhost:8080'

Step 3 – Create the Controller

Create controller file named FileUploadController.php in app/controllers directory, and implement methods in it to handle multiple file upload via ajax:

<?php

namespace App\Controllers;

use CodeIgniter\Controller;
use CodeIgniter\HTTP\ResponseInterface;

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

    public function uploadFiles()
    {
        $files = $this->request->getFiles();
        $uploaded = [];

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

        return $this->response->setJSON([
            'status' => 'success',
            'files' => $uploaded
        ]);
    }
}

Step 4 – Create the View

Go to app/views directory and create a view file named upload_form.php, and create a multiple file upload form in it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeIgniter 4 ajax upload Multiple Files Example - Itcodstuff.com</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>Upload Multiple Files</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple>
        <button type="submit">Upload</button>
    </form>
    <div id="uploadStatus"></div>


</body>
</html>

Step 5 – Implement Ajax Code

Edit form view, and implement ajax code in it to handle multiple file uploads without page refresh:

    <script>
        $(document).ready(function (e) {
            $('#uploadForm').on('submit', function (e) {
                e.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    url: '<?= base_url('file-upload') ?>',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.status === 'success') {
                            $('#uploadStatus').html('<p>Files uploaded successfully!</p>');
                            response.files.forEach(function (file) {
                                $('#uploadStatus').append('<p>' + file + '</p>');
                            });
                        } else {
                            $('#uploadStatus').html('<p>Some problem occurred, please try again.</p>');
                        }
                    }
                });
            });
        });
    </script>

Step 6 – Define Routes

Define the routes in app/Config/Routes.php file:

$routes->get('/', 'FileUploadController::index');
$routes->post('file-upload', 'FileUploadController::uploadFiles');

Step 7 – Test the Application

Run the following command to start application server:

php spark serve

Type http://localhost:8080 url on browser to test this application.