In this tutorial, we will show you how to upload multiple images in CodeIgniter 4. We will use the File Uploading Class to upload multiple images.
First, we will create a view file to upload multiple images. Create a file named upload_multiple_images.php in the application/views folder and add the following code in it:
CodeIgniter 4 Multiple Image File Upload Example
Next, we will create a controller file to upload multiple images. Create a file named Upload.php in the application/controllers folder and add the following code in it:
request->getFileMultiple(‘images’);
foreach ($files as $file)
{
$file->move(WRITEPATH . ‘uploads’);
}
}
}
Finally, we will create a route to access the view file. Open the routes.php file in the application/config folder and add the following route in it:
$routes->get(‘upload’, ‘Upload::upload_multiple_images’);
Now, you can access the view file by visiting the following URL in your browser:
http://localhost/upload
You should see the following page:
CodeIgniter 4 Multiple Image File Upload Example
Choose multiple images and click on the Upload button. The images will be uploaded to the uploads folder.
CodeIgniter 4 multiple image/file upload example tutorial. Here, you will learn how to insert /upload multiple images in the database using CodeIgniter 4 application.
When you are working with Codeigniter 4 application. So many times you need to upload multiple images and files to the server simultaneously. So this tutorial will help you to upload multiple files / images in CodeIgniter 4 into the database
CodeIgniter 4 Multiple Image File Upload with Validation Example
Follow the below steps and easily upload/insert multiple images using in folder and store into the database in CodeIgniter 4 projects:
- Step 1: Setup Codeigniter Project
- Step 2: Basic Configurations
- Step 3: Create Database With Table
- Step 4: Setup Database Credentials
- Step 5: Create Controller
- Step 6: Create Views
- Step 7: Start Development server
Step 1: Setup Codeigniter Project
In this step, we will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Step 2: Basic Configurations
Next, we will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
public $baseURL = 'http://localhost:8080'; To public $baseURL = 'http://localhost/demo/';
Step 3: Create Database With Table
In this step, we need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a table in your database.
CREATE TABLE files (
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
name varchar(100) NOT NULL COMMENT 'Name',
type varchar(255) NOT NULL COMMENT 'file type',
created_at varchar(20) NOT NULL COMMENT 'Created date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='demo table' AUTO_INCREMENT=1;
Step 4: Setup Database Credentials
In this step, we need to connect our project to the database. we need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, We need to set up database credentials in this file like below.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
Step 5: Create Controller
Now Go to app/Controllers and create a controller name Form.php. In this controller, we will create some method/function. We will build some of the methods like :
- multipleImage() – This is used to display file/image upload form.
- storeMultipleFile() – This is used to upload multiple file/image into MySQL database and folder.
<?php namespace App\Controllers;
use CodeIgniter\Controller;
class Form extends Controller
{
public function multipleImage()
{
return view('multiple-image');
}
public function storeMultipleFile()
{
helper(['form', 'url']);
$db = \Config\Database::connect();
$builder = $db->table('file');
$msg = 'Please select a valid files';
if ($this->request->getFileMultiple('file')) {
foreach($this->request->getFileMultiple('file') as $file)
{
$file->move(WRITEPATH . 'uploads');
$data = [
'name' => $file->getClientName(),
'type' => $file->getClientMimeType()
];
$save = $builder->insert($data);
$msg = 'Files has been uploaded';
}
}
return redirect()->to( base_url('public/index.php/form/multipleImage') )->with('msg', $msg);
}
}
Step 6: Create Views
Now we need to create multiple-image.php, go to application/views/ folder and create multiple-image.php file. and update the following HTML into your files:
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Multiple Image upload example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<?php if (session('msg')) : ?>
<div class="alert alert-info alert-dismissible">
<?= session('msg') ?>
<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
</div>
<?php endif ?>
<div class="row">
<div class="col-md-9">
<form action="<?php echo base_url('public/index.php/form/storeMultipleFile');?>" name="ajax_form" id="ajax_form" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<div class="form-group">
<label for="formGroupExampleInput">Select Files</label>
<input type="file" name="file[]" class="form-control" id="file" multiple>
</div>
<div class="form-group">
<button type="submit" id="send_form" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Step 7: Start Development server
For start development server, Go to the browser and hit below the URL.
http://localhost/demo/public/index.php/multipleImage
Conclusion
In this Codeigniter 4 ajax image upload with preview example tutorial. You have learned how to upload image in CodeIgniter 4 projects using jQuery ajax with preview.
Recommended Codeigniter Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
