Codeigniter 4 jQuery Image Upload with Preview Example

In this tutorial, we will show you how to upload images with a preview using jQuery in your CodeIgniter 4 app. If you want to learn how to upload images and preview them in CodeIgniter 4, or how to save the uploaded image in the database, this tutorial is for you.

We will create a form with an input field whose type will be file. You can select any image file from your computer. We will also create a preview of the selected image before uploading it to the server.

Follow the steps given below to learn how to upload an image with a preview in CodeIgniter 4 using jQuery.

Codeigniter 4 jQuery 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

Let’s begin by downloading the latest version of CodeIgniter 4 from the official website. You can download it from this link: https://codeigniter.com/download. Once downloaded, extract the files and save them in your local system’s xampp/htdocs/ directory.

Now, change the folder name to “demo” to make it easy to remember and work with. This step is important as we will be using the CodeIgniter 4 framework for our image file upload example.

Step 2: Basic Configurations

In the next step, we need to make some basic configurations to the app/config/app.php file. To do this, we will go to the application/config/ directory and open the config.php file in a 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 will create a database named “demo”. To do this, we will open our PHPMyAdmin and create a new database with the name “demo”.

Once the database is successfully created, we will need to use an SQL query to create a table in the database. This table will be used to store our image file data.

It is important to note that the table structure should match the requirements of our image file upload example. So, make sure to use the correct SQL query while creating the table.

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 will connect our CodeIgniter 4 project to the database. To do this, we need to go to the app/Config/Database.php file and open it in a text editor.

Once we have opened the file, we will need to set up the database credentials. This means we need to provide the database name, username, and password.

It is important to note that the database credentials should match the database that we created in the previous step. Once we have added the credentials, we can save the file. This will allow our CodeIgniter 4 project to connect to the database.

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 tutorial, you have learned how to upload images with a preview in CodeIgniter 4 projects and how to validate images on the server-side using the CodeIgniter 4 framework.

You May Also Like This

Codeigniter 4 jQuery Image Upload with Preview Example

Recommended Post

Leave a Reply Cancel reply

Read Next