September 22, 2021

How to Show Image Before Upload in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to show image before upload in javascript. If you are creating an application where image upload is the requirement then definitely you would like to show a preview of that image so that the user can make sure that he is about to upload the correct image.

This problem can be easily solved using the FileReader object. With the help of the FileReader object, we can read a file as a data URI using the readAsDataURL() method and set it as the image source of the image element.

In the following example, we have an input element of file type. We will select an image file from the images directory and display that image on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have a few elements in the HTML file and that includes div, input, and image. The div element with a class of container is just a wrapper for the rest of the elements.

The input element is of file type so that we could have the ability to select an image from the local directory.
We are using balank.png as our default image in the img element.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <input type="file">
        <div class="preview">
            <img src="images/blank.png" alt="profile image">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <input type="file">
        <div class="preview">
            <img src="images/blank.png" alt="profile image">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Javascript

We have selected 2 elements input and img using document.querySelector() method and stored them in input and img variables respectively.

We have attached the change event listener to the input element.
In the event handler function, we are getting the first file using the index of 0 from input.files array and storing it in the file variable.
Since the file variable could be null if the user did not select any file and closed file dialog, we will verify this first using the if statement.

We are using FileReader() constructor to create an instance of the FileReader object and storing it in the reader variable.
We have attached the load event listener to the FileReader object and in the event handler function, we are getting image data URI from the result property and setting it as a source of the img element.
We are using readAsDataURL() to get file data as data URI. This data URI contains file data as a base64 encoded string.

let input = document.querySelector('input');
let img = document.querySelector('img');

input.addEventListener('change', () => {
    let file = input.files[0];

    if (file) {
        let reader = new FileReader();
        reader.addEventListener('load', () => img.src = reader.result);
        reader.readAsDataURL(file);
    }else img.src = "images/blank.png";
});

You May Also Like: