How to Add an Image Preview When an Image File is Selected in the File Input?

Adding a preview for the selected image is something that we’ve to do sometimes in our JavaScript web app.

In this article, we’ll look at how to add an image preview to show the image the user is selected.

Add an Image Preview for a File Input

To add the image preview for a file input, first, we add the file input and the img element to display the image preview:

<form>
  <input type='file' />
  <img src="#" alt="selected image" />
</form>

We set the type to file to make the input a file input.

Next, we need to add some JavaScript code to read the file into a base64 string.

Then we can set the src property of the img element to the base64 string.

To do this, we write:

const imgInput = document.querySelector('input')
const imgEl = document.querySelector('img')

imgInput.addEventListener('change', () => {
  if (imgInput.files && imgInput.files[0]) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL(imgInput.files[0]);
  }
})

We get the input and img elements with document.querySelector .

Then we call addEventListener on the imgInput with a callback to let us watch for file selection.

We pass in 'change' to watch the change event, which is triggered when we select a file.

In the callback, we check is imgInput.files is present.

files has the selected files.

We get the first file with the 0 index.

Then we create the FileReader instance to read the selected file.

And we set the onload method which runs when a file is selected.

We get the e.target.result to get the file result.

The file should be read into a base64 string, which is a valid value for the src attribute of an img element.

Therefore, we can set img.src property directly to e.target.result .

And to trigger the reading of the file, we call reader.readAsDataURL method with imgInput.files[0] , which has the first selected file.

The createObjectURL Method

We can also use the createObjectURL method to create the base64 string from the selected image file.

For instance, we can write:

const imgInput = document.querySelector('input')
const imgEl = document.querySelector('img')

imgInput.addEventListener('change', () => {
  if (imgInput.files && imgInput.files[0]) {
    imgEl.src = URL.createObjectURL(imgInput.files[0]);
    imgEl.onload = () => {
      URL.revokeObjectURL(imgEl.src)
    }
  }
})

and keep the HTML code the same.

We call URL.createObjectURL with imgInput.files[0] to create the base64 string from the file object stored in imgInput.files[0] .

Then we set the onload method of the img element object, which is run when the src attribute of the img element changes.

We call URL.revokeObjectURL there to free the image object from memory.

Conclusion

We add an image preview to our JavaScript app by reading the selected image file into a base64 string and setting it as the value of the src attribute of an img element.