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.