Codeigniter 4 upload Multiple Files using Ajax

The CodeIgniter 4 tutorial on uploading Multiple Files using Ajax demonstrates how to upload multiple files seamlessly without refreshing the page.

Let’s get started with an easy step-by-step guide to creating a CodeIgniter 4 Ajax multiple file upload using Ajax:

Step 1 – Set Up CodeIgniter 4 App

Install the CodeIgniter 4 application using the following command:

composer create-project codeigniter4/appstarter codeigniter4-upload-files

Step 2 – Configure Project

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

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

Step 3 – Create Controller

Create a controller file named FileUploadController.php in the app/controllers directory. Implement methods to handle multiple file uploads via Ajax:

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

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

Navigate to the app/views directory and create a view file named upload_form.php. Create a form for multiple file uploads:

<!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>

    <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>
</body>
</html>

Step 5 – Implement Ajax Code

Update the upload_form.php view file with Ajax code 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 the app/Config/Routes.php file:

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

Step 7 – Test the Application

Start the application server with the command:

php spark serve

Visit http://localhost:8080 in your browser to test this application.

This concludes the step-by-step guide to creating a CodeIgniter 4 Ajax multiple file upload application, enhancing your project with efficient file management capabilities.