codeigniter 4 multiple images & files upload example

April 11, 2020 XpertPhp Comments 0 Comment

In this tutorial, We will inform you how to upload multiple images & files in CodeIgniter 4(Codeigniter 4 multiple images & files upload example).

In this Codeigniter 4 tutorial, we will use the Codeigniter library to upload images or files. so we will give a simple example for you. let us follow the below steps.

Overview
Step 1: Download Codeigniter
Step 2: Create a Database in table
Step 3: Connect to Database
Step 4: Create Controller
Step 5: Create Routes
Step 6: Create Views Files
Step 7: Run The Application

Step 1: Download Codeigniter
If you want to download or install CodeIgniter 4 then you can below Url.
How To Install Codeigniter 4 Using Manual, Composer, Git

Step 2: Create a Database in table
In this step, We will create the database and table.

CREATE TABLE users (
    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',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='users table' AUTO_INCREMENT=1;

CREATE TABLE users (

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',

PRIMARY KEY (id)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='users table' AUTO_INCREMENT=1;

Step 3: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'codeigniter4_image',
		'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,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter4_image',

'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 4: Create Controller
In this step, we will create an “ImageUpload.php” controller.
app/Controllers/ImageUpload.php

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class ImageUpload extends Controller
{
 
    public function index()
    {    
        return view('image');
    }    
 
    public function upload_image()
    {    
         helper(['form', 'url']);
         
        $database = \Config\Database::connect();
        $user = $database->table('users');
		
		
		$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()
              ];
 
              $user->insert($data);
              $msg = 'Files has been uploaded';
             }
        }
    
       
		return redirect()->to( base_url('image') )->with('msg', $msg);
    }
}

?>

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class ImageUpload extends Controller

{

public function index()

{

return view('image');

}

public function upload_image()

{

helper(['form', 'url']);

$database = \Config\Database::connect();

$user = $database->table('users');

$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()

];

$user->insert($data);

$msg = 'Files has been uploaded';

}

return redirect()->to( base_url('image') )->with('msg', $msg);

}

Step 5: Create Routes
Add the following route code in the “app/config/Routes.php” file.

$routes->get('/image', 'ImageUpload::index');

1	$routes->get('/image', 'ImageUpload::index');

Step 6: Create Views Files
Finally, we will create an image.php in the app/views directory.
app/views/image.php

<!DOCTYPE html>
<html lang="en">
<head>
	<title>codeigniter 4 multiple images & files upload example - XpertPhp</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<?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 ?>
		<form method="post" action="<?php echo base_url('ImageUpload/upload_image');?>" enctype="multipart/form-data">
		  <div class="form-group">
			<label>Image</label>
			<input type="file" name="file[]" class="form-control">
		  </div>
		  <button type="submit" class="btn btn-primary">Upload</button>
		</form>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>codeigniter 4 multiple images & files upload example - XpertPhp</title>

</head>

<body>

<?php if (session('msg')) : ?>

<?= session('msg') ?>

</div>

<?php endif ?>

<form method="post" action="<?php echo base_url('ImageUpload/upload_image');?>" enctype="multipart/form-data">

<label>Image</label>

</div>

<button type="submit" class="btn btn-primary">Upload</button>

</form>

</div>

</body>

</html>

Step 7: Run The Application
We can start the server and run this example using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/image

1	http://localhost:8080/image