The input field allows the user to select an image from a form and jQuery will display a preview of the selected image before uploading it to the server in codeigniter 4.
Here are some steps to upload the image to the folder and store it in the database with preview:
Step 1: Setup Codeigniter 4 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 set up and unzip the setup in your local system xampp/htdocs/ . And change the download folder name to “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 the text editor.
Set a 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 creating 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 the database.php file in a 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 methods/functions. We will build some of the methods like :
- Index() – This is used to display the file/image upload form.
- Store() – This is used to validate form files/images on the server-side and store in MySQL database and folder.
<?php namespace App\Controllers;
use CodeIgniter\Controller;
class Form extends Controller
{
public function index()
{
return view('form');
}
public function store()
{
helper(['form', 'url']);
$db = \Config\Database::connect();
$builder = $db->table('file');
$validated = $this->validate([
'file' => [
'uploaded[file]',
'mime_in[file,image/jpg,image/jpeg,image/gif,image/png]',
'max_size[file,4096]',
],
]);
$msg = 'Please select a valid file';
if ($validated) {
$avatar = $this->request->getFile('file');
$avatar->move(WRITEPATH . 'uploads');
$data = [
'name' => $avatar->getClientName(),
'type' => $avatar->getClientMimeType()
];
$save = $builder->insert($data);
$msg = 'File has been uploaded';
}
return redirect()->to( base_url('public/index.php/form') )->with('msg', $msg);
}
}
Step 6: Create Form in View
Now we need to create form.php, go to application/views/ folder and create form.php file. and update the following HTML in your files:
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Image upload with preview example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</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('form/store');?>" name="ajax_form" id="ajax_form" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<div class="row">
<div class="form-group col-md-6">
<label for="formGroupExampleInput">Name</label>
<input type="file" name="file" class="form-control" id="file" onchange="readURL(this);" accept=".png, .jpg, .jpeg" />
</div>
<div class="form-group col-md-6">
<img id="blah" src="//www.tutsmake.com/wp-content/uploads/2019/01/no-image-tut.png" class="" width="200" height="150"/>
</div>
<div class="form-group">
<button type="submit" id="send_form" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function readURL(input, id) {
id = id || '#blah';
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(id)
.attr('src', e.target.result)
.width(200)
.height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
Step 7: Test Project
Go to the browser and hit below the URL.
http://localhost/demo/public/index.php/form
Conclusion
In this Codeigniter 4 image upload with preview example tutorial. You have learned how to upload images in CodeIgniter 4 projects with preview and how to validate images on the server side in CodeIgniter 4 framework.
Recommended Codeigniter Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
