Codeigniter 4 jQuery Image Upload with Preview Tutorial

To image upload with preview in ci 4; In this tutorial, you will learn how to upload images in Codeigniter 4 apps with preview using jquery.

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

Codeigniter 4 jQuery Image Upload with Preview Tutorial

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

• 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 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 Views

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>

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

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

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

Step 7: Start Development server

To start the 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 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.