How to upload an Image file and Display preview in CodeIgniter 4

Last updated on by

CodeIgnite­r 4 is a PHP framework that makes web application de­velopment simpler. A common task in this fie­ld is uploading image files and displaying previe­ws of those images. This article e­xplains how to accomplish the task in CodeIgniter 4 while­ ensuring security by utilizing a CSRF token.

Many website­s, such as social media platforms, e-commerce­ sites, and content manageme­nt systems have a core fe­ature of uploading image files. Offe­ring users the flexibility to upload image­s enhances their ove­rall experience­ and contributes to more appealing and vibrant conte­nt.

Impleme­nting security measures is crucial whe­n developing upload functionality for web applications. Cybe­r-attacks such as CSRF can have severe­ consequences, but luckily, Code­Igniter 4 includes built-in protection against this thre­at, adding an extra layer of security to our image­ upload system. This feature works by ge­nerating CSRF tokens that validate authorize­d requests and reje­ct malicious ones during the transfer of information. By using Code­Igniter’s CSRF protection, we can maintain the­ integrity and safety of our system while­ enabling seamless file­ transferring capability.

Throughout this article, we will guide you step by step on how to configure CSRF protection, create an upload form, handle the image upload process, and display image previews. By following these instructions, you will be equipped with the knowledge to implement secure image upload and preview functionality in your CodeIgniter 4 applications.

How to upload an image file and display preview in CodeIgniter 4

Download

Contents

  1. Configuring CSRF Protection
  2. Creating Routes
  3. Creating the Controller
  4. View – Creating the Upload Form
  5. Output
  6. Conclusion

1. Configuring CSRF Protection

To combat Cross-Site Re­quest Forgery (CSRF) attacks, CodeIgnite­r 4 offers built-in CSRF protection that safeguards the­ website’s integrity whe­n interacting with a user’s browser. CodeIgniter 4 provides built-in CSRF protection to mitigate such attacks.

To enable CSRF protection in your CodeIgniter 4 application, follow these steps:

  • Open .env file.
  • Remove # from the start of the security.tokenName,security.headerName, security.cookieName, security.expires,and security.regenerate.
  • I modified the value of security.tokenName to csrf_hash_name, this name used to retrieve the CSRF hash. You can choose any other value as desired.
  • If you prefer not to regenerate the CSRF hash after each AJAX request, you can set security.regenerate to false.
security.tokenName = 'csrf_hash_name' 
security.headerName = 'X-CSRF-TOKEN' 
security.cookieName = 'csrf_cookie_name' 
security.expires = 7200 
security.regenerate = true
  • Open the app/Config/Filters.php file.
  • Locate the $globals array within the file.
  • Uncomment the line that includes the csrf alias. It should look like this:
// Always applied before every request
public $globals = [
    'before' => [
          // 'honeypot',
          'csrf',
          // 'invalidchars',
    ],
    'after' => [
          'toolbar',
          // 'honeypot',
          // 'secureheaders',
    ],
];

2. Creating Routes

  • Open the app/Config/Routes.php file.
  • Define 2 routes –
    • / – This allows users to access the upload form page.
    • users/fileUpload –  POST type route to handle the submission of the upload form and triggers the image upload process.
$routes->get('/', 'UsersController::index');
$routes->post('users/fileUpload', 'UsersController::fileUpload');

3. Creating the Controller

  • Create UsersController Controller –
php spark make:controller UsersController
  • Create 2 methods –
    • index() – This method loads the users view.
    • fileUpload() – This method is called when the form is submitted to upload the file.

Set file validation –

'file' => 'uploaded[file]|max_size[file,1024]|ext_in[file,jpg,jpeg,docx,pdf],'
    1. uploaded – Fails if the name of the parameter does not match the name of any uploaded files.
    2. max_size – Set maximum file upload size in kb.
    3. ext_in – Defines valid file extensions, such as jpg, jpeg, docx, pdf.

In this example, the input field name is ‘file’, but you can replace it with your specific input field name.

For example, If the input field name is ‘imagefile’ then validation is like this – 'uploaded[imagefile]|max_size[imagefile,1024]|ext_in[imagefile,jpg,jpeg],'.

NOTE – Follow this link to learn more about validation.

If the file fails validation, return to the users view with the validation response.

If the file passes validation, retrieve the file name and extension. $file->getRandomName() is used to generate a random name, but you can assign any other meaningful name to the $newName variable.

Store the file in the public/uploads folder using the move() method. The first parameter is the file upload path, and the second parameter is the name.

Assign the file path to the $filepath variable for preview. Use the SESSION flash feature to display the “Uploaded Successfully!” message and file preview.

Redirect to the "/" route.

<?php namespace App\Controllers;

class UsersController extends BaseController
{

    public function index(){
         return view('users');
    }

    public function fileUpload(){

         // Validation
         $input = $this->validate([
              'file' => 'uploaded[file]|max_size[file,1024]|ext_in[file,jpg,jpeg,docx,pdf],'
         ]);

         if (!$input) { // Not valid
              $data['validation'] = $this->validator; 
              return view('users',$data); 
         }else{ // Valid

              if($file = $this->request->getFile('file')) {
                    if ($file->isValid() && ! $file->hasMoved()) {
                         // Get file name and extension
                         $name = $file->getName();
                         $ext = $file->getClientExtension();

                         // Get random file name
                         $newName = $file->getRandomName(); 

                         // Store file in public/uploads/ folder
                         $file->move('../public/uploads', $newName);

                         // File path to display preview
                         $filepath = base_url()."/uploads/".$newName;
               
                         // Set Session
                         session()->setFlashdata('message', 'Uploaded Successfully!');
                         session()->setFlashdata('alert-class', 'alert-success');
                         session()->setFlashdata('filepath', $filepath);
                         session()->setFlashdata('extension', $ext);

                    }else{
                         // Set Session
                         session()->setFlashdata('message', 'File not uploaded.');
                         session()->setFlashdata('alert-class', 'alert-danger');

                    }
              }

         }
  
         return redirect()->route('/'); 
    }

}

4. View – Creating the Upload Form

  • Create a users.php file in the app/Views/ folder.
  •  If the message session exists, display a bootstrap alert message. Use the alert-class session to set the alert class.
  • If the filepath session exists, display a file preview. Check the file extension, and if it is equal to ‘jpg’ or ‘jpeg’, pass session()->getFlashdata('filepath') to the src attribute of an <img> tag. Otherwise, create an anchor element and pass session()->getFlashdata('filepath') to the href attribute.
  • Load the validation service by assigning \Config\Services::validation() to the $validation variable.
  • Create a <form> element with the following attributes: method="post", action="<?=site_url('users/fileUpload')?>", and enctype="multipart/form-data".
  • Create a file input element and a submit button.
  • If the form validation fails, display the error(s) in a <div> element.
<!doctype html>
<html>
<head>
    <title>How to upload an image file and display preview in CodeIgniter 4</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

    <div class="container">

         <div class="row">
              <div class="col-md-12">
                   <?php 
                   // Display Response
                   if(session()->has('message')){
                   ?>
                   <div class="alert <?= session()->getFlashdata('alert-class') ?>">
                         <?= session()->getFlashdata('message') ?>
                   </div>
                   <?php
                   }
                   ?>

                   <?php 
                   // File preview
                   if(session()->has('filepath')){ ?>

                   <?php 
                        if(session()->getFlashdata('extension') == 'jpg' || session()->getFlashdata('extension') == 'jpeg'){
                   ?>
                             <img src="<?= session()->getFlashdata('filepath') ?>" with="200px" height="200px"><br>

                   <?php
                        }else{
                   ?>
                             <a href="<?= session()->getFlashdata('filepath') ?>">Click Here..</a>
                   <?php
                        }
                   }
                   ?>

                   <?php $validation = \Config\Services::validation(); ?>

                   <form method="post" action="<?=site_url('users/fileUpload')?>" enctype="multipart/form-data">

                        <?= csrf_field(); ?>
                        <div class="form-group">
                             <label for="file">File:</label>

                             <input type="file" class="form-control" id="file" name="file" />
                             <!-- Error -->
                             <?php if( $validation->getError('file') ) {?>
                             <div class='alert alert-danger mt-2'>
                                  <?= $validation->getError('file'); ?>
                             </div>
                             <?php }?>

                        </div>

                        <input type="submit" class="btn btn-success" name="submit" value="Upload">
                   </form>
              </div>
         </div>
    </div>

</body>
</html>

5. Output

View Output

6. Conclusion

The article­ delves into uploading an image file­ and displaying a preview while e­nsuring protection against CSRF tokens in CodeIgnite­r 4. By following the steps outlined above­, your CodeIgniter 4 application can have a se­cure and user-friendly fe­ature for image uploads.

When uploading image­s, it’s important to take into account your unique require­ments and implement ne­cessary validations and security measure­s. Achieve this by restricting file­ types and sizes, validating on the se­rver-side, as well as e­nhancing overall security measure­s.

With the knowledge gained from this article, you can now confidently implement image upload and preview functionality in your CodeIgniter 4 projects, offering users a seamless and secure experience.

If you found this tutorial helpful then don't forget to share.

© 2016-2023 Makitweb, All rights reserved