Preview an image before uploading it

We prepare the markup for a file input which allows to choose an image, and an img element for previewing the selected file.

<input type="file" id="fileInput" />

<img id="preview" />

Both elements can be taken by the getElementById() method:

const fileEle = document.getElementById('fileInput');
const previewEle = document.getElementById('preview');

1. Use the URL.createObjectURL() method

fileEle.addEventListener('change', function(e) {
// Get the selected file
const file = e.target.files[0];

// Create a new URL that references to the file
const url = URL.createObjectURL(file);

// Set the source for preview element
previewEle.src = url;
});

2. Use the FileReader's readAsDataURL() method

fileEle.addEventListener('change', function(e) {
// Get the selected file
const file = e.target.files[0];

const reader = new FileReader();
reader.addEventListener('load', function() {
// Set the source for preview element
previewEle.src = reader.result;
});

reader.readAsDataURL(file);
});

More

Previous
Prevent body from scrolling when opening a modal
Next
Redirect to another page