Uploading selected image to server is one of the common requirement in many front end applications. Some applications uploads the image to the server immediately once selected. Though the requirements may differ from application to application, it may be good idea to show the preview of the selected image before uploading to the server.
In this example we will implement how to show the preview of the selected image in JavaScript without using any third party library or framework, which looks something like this. We used bootstrap CSS framework and you are free to use any CSS of your choice.
before selecting the image
after selecting the image
Lets add some 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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body class="container">
<div class="card mb-3 mt-4" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<div class="mt-2">
<h2>Image Upload</h2>
<input class="form-control" id="fileInput" type="file" accept="image/*">
</div>
</div>
</div>
<div class="col-md-4" style="background-color: lightgrey;">
<div id="imagePreviewContainer">
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" fill="currentColor"
class="bi bi-image mt-3 ms-5 " viewBox="0 0 16 16">
<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
<path
d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
</svg>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
In the above HTML, we have an input element clicking on which we want to select an image. Then we have a div element with id imagePreviewContainer to display either the thumbnail preview of the selected image or an SVG icon, if the image is not selected.
JavaScript:
let fileInputElement = document.querySelector('#fileInput');
let imagePreviewContainer = document.querySelector('#imagePreviewContainer');
let placeholderIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" fill="currentColor"
class="bi bi-image mt-3 ms-5 " viewBox="0 0 16 16">
<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
<path
d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
</svg>`
fileInputElement.addEventListener('change', (event) => {
console.log(event.target.files[0]);
if (event.target.files.length > 0) {
let selectedFile = event.target.files[0];
if (["image/jpeg", "image/png", "image/svg+xml"].includes(selectedFile.type)) {
let fileReader = new FileReader();
fileReader.readAsDataURL(selectedFile);
fileReader.addEventListener('load', (event) => {
imagePreviewContainer.innerHTML = ` <img class="img-thumbnail" style="width:300px; height:200px" src=${event.target.result} >`
})
} else {
window.alert('Not an Image')
event.target.value = '';
imagePreviewContainer.innerHTML = placeholderIcon;
}
} else {
imagePreviewContainer.innerHTML = placeholderIcon;
}
})
We have added an event listener to the input element which gets triggered on the ‘change’ event. That means, when we select an image. Inside that event listener callback function, We have an if-else condition using which we are either displaying the selected image preview or a placeholder icon when the image is not selected.
When we select a file, we are checking, if the selected file is of jpeg or png or svg type, if it is, we have used the built-in FileReader object to read the file. Once the file is read (load), it will trigger the callback function passed to it as an event listener, in which we are replacing the contents of the container div element with the selected image file (we can do it in multiple ways such as by using the createElement method on the document, for simplistic reasons, we have used innerHTML method).
Leave A Comment