CodeIgniter 4 - Upload with Thumbnail Preview Using Javascript File Reader (without AJAX)

Posted by Ridwan Fadilah on Jul 22, 2020 - 05:01 pm

Upload with Thumbnail Preview Using Javascript File Reader (without AJAX)

How to make an upload file preview or thumbnail in CodeIgniter 4 using javascript File Reader (without AJAX).

When you upload a file on a website, usually you'll see a preview or thumbnail of the upload file that will be uploaded.

You can use AJAX to make a file preview. However, no worries if you haven't to learn and do not understand AJAX. There are several ways to make an upload file preview. You can use JavaScript or jQuery as an alternative to making the preview.

In this tutorial, I'll show you how to make an upload file preview or thumbnail in CodeIgniter 4 using javascript File Reader.

Preparation

Before we start to make an upload file preview, I recommend you to see the previous article about 'CodeIgniter 4 - Insert and Update Data (CRUD) with Single File Upload' because I'll use the same form with the form on that tutorial.

Create a javascript file or place the script element at the bottom document before the '</body>' tag.

Example:



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>

...your content goes here
  
<script>

... your script goes here

</script>
</body>
</html>


Create one image for default thumbnail. The image will display before the user choosing the file.

Default Image

Input Field

The preview thumbnail and the input field will put into the same row that consists of two columns.

In this CodeIgniter 4 - Upload and Thumbnail Preview Tutorial, I use the Bootstrap 5. You can ignore all the classes contains in this form if you didn't use Bootstrap.

The Form (Input Field):



<div class="row">
  <div class="col-md-2">
    <img src="/assets/img/default.png" alt="Thumbnail" class="img-thumbnail">
  </div>
  <div class="col-md-10 my-auto">
    <div class="form-file">
      <input type="file" class="form-file-input <?= ($validation->hasError('preview_image')) ? 'is-invalid' : ''; ?>" id="preview_image" name="preview_image" onchange="thumbnail()">
      <div class="invalid-feedback">
        getError('preview_image'); ?>
      </div>
      <label class="form-file-label" for="preview_image">
        <span class="form-file-text">Choose Image...</span>
        <span class="form-file-button">Browse</span>
      </label>
    </div>
  </div>
</div>


The form will display by the browser like this:

The Form

Here I use 'onchange="thumbnail()"' to call the 'thumbnail()' function from the script.

The 'onchange' event will execute a javascript when a user changes the value of the input field.

The Javascript Function

To make the 'onchange' event work and display the thumbnail preview, you need to use the javascript file reader with the 'readAsDataURL' method.

The 'readAsDataURL' method is used to read the contents of the specified Blob or File.

We'll also use the javascript DOM 'textContent' property to change the text label of the 'form-file-text' class.

The Script:



<script>
  function thumbnail() {

    const image = document.querySelector('#preview_image');
    const imageLabel = document.querySelector('.form-file-text');
    const imageThumbnail = document.querySelector('.img-thumbnail');

    imageLabel.textContent = image.files[0].name;

    const imageFile = new FileReader();
    imageFile.readAsDataURL(image.files[0]);

    imageFile.onload = function(e) {
      imageThumbnail.src = e.target.result;
    }
  }
</script>


Now, you can try to choose the image or file to see what happens.

Here's the result:

Thumbnail Preview

Okay, that's the CodeIgniter 4 tutorial about how to make an upload file preview or thumbnail without AJAX. You can find another tutorial on our YouTube Channel. You can also find the full source code of these examples on our GitHub.

Thanks for reading this tutorial.


Related Articles