CodeIgniter 4 Image Upload With Preview Example

If you’re looking image that CodeIgniter image upload with preview, image upload preview in CodeIgniter 4 with database example, save uploaded image in the database by using CodeIgniter 4, Codeigniter 4 image preview before upload using jquery demo. So this tutorial is very helpful for you.

CodeIgniter 4 image upload with preview example tutorial. Here, you will learn how to upload image in Codeigniter 4 projects with preview using jquery.

CodeIgniter 4 Image Upload With Preview Example

Follow the below steps and easily upload files in folder and store into the database in CodeIgniter 4 projects with preview:

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Database With Table
  • Setup Database Credentials
  • Create Controller
  • Create Views
  • Start Development server

Step 1: Download 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 :

  • Index() – This is used to display file/image upload form.
  • Store() – This is used to validate form file/image on server-side and store into 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 Views

Now we need to create form.php, go to application/views/ folder and create form.php file. and update the following HTML into 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 &amp;&amp; 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>

This below line display error messages on your web page:

 <?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 ?>

This below script code show preview of your image on your web page:

<script> function readURL(input, id) { id = id || '#blah'; if (input.files &amp;&amp; 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>

Step 7: Start Development server

For start development server, 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 image in CodeIgniter 4 projects with preview and how to validate image on server-side in CodeIgniter 4 framework.

If you have any questions or thoughts to share, use the comment form below to reach us.

Related Posts