Preview a Selected Image in JavaScript

    Hi everyone in this article we are going to see how we can implement the preview image feature in our simple web application using simple javascript.

Prefer to watch? Here's the video version of this post.

    Before we start make sure you are good at javascript and html in general. This is not a html or css tutorial so we will not focus on that. Our focus is to just implement preview feature in javascript so that you can you it in your project however you like.

    So let's get started by 

Main index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input image previewer</title>
</head>

<body>
    <input type="file" id="input" />
    <div class="preview"></div>
</body>
</html>

    Above is the code that we have in our html file which is just basic html. And this is where we will add all our code we are not using external stylesheet or javascript file every thing will be in same file.

Styles For the input and Image

<style>
        .preview img {
            width: 30%;
            height: 30%;

        }
        input { 
            width: 100%;
            height: 100%;
            border: none;
            background-color: transparent;
            outline: none;

        }
 </style>

    As you can see we just have basic styling to the page

Image preview feature in javascript

<script>
    //display input file img in preview
    const input = document.getElementById('input');
    input.addEventListener('change', function (e) {
        const preview = document.querySelector('.preview');
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = function (e) {
            preview.innerHTML = `<img src="${e.target.result}" alt="">`;
        }
        reader.readAsDataURL(file);
    })
</script> 

    This code in the javascript is core of our project. In the above code add a event listener on our input and then whenever there is change in the input we trigger a arrow function callback with the event parameter.

    In the function we first take the reference of the image preview container and then take the file from the input. Next comes creating a new  file reader from the FileReader() class in javascript.

    Then we add function on the reader onload event and pass the event object to the function where we set the preview elements inner HTML to the img tag with the image selected by the user.    

    Then we call the reader.readAsDataURL and pass the file to it. And that all that we need.

    But now lets look at the output result that we will get from the above code:

    Output:

before the user selects the image

Output after the user has selected the image