05-Aug-2020
.
Admin
Hi Guys,
In this tutorial, i will share with you how to upload multiple image in codeigniter 4 application. we can easily do multiple file upload example in codeigniter.
i will give you simple example with step by step to upload multiple file in codeigniter 4 application. we will use upload library for multiple file upload in codeigniter. using upload library we will store all images or files store in our uploads directory.
So, let's follow few bellow step to upload multiple file or images example:
Step 1: Download Fresh Codeigniter 4
In First step we will download fresh version of Codeigniter 4, so if you haven't download yet then download from here : Download Codeigniter 4.
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.
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.
<?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
It will help you....
#Codeigniter
