Showing preview of the selected image selected through an input element of type file before uploading to the server is one of the common requirement. In this example, we will do it by using the currently most widely used JavaScript framework React JS. We will be using Bootstrap card for the UI and you can use any other CSS framework or your own styles.
Before selecting the file, the output will be like this
After selecting
HTML Part of the JSX code:
return (
<div className="card mb-3 mt-5" style={{ "maxWidth": "540px" }} >
<div className="row g-0">
<div className="col-md-4">
{isImageSelected ?
<img src={imagePreviewSrc} className="img-fluid rounded-start" alt="..." />
:
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" fill="currentColor"
className="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 className="col-md-8">
<div className="card-body">
<h5 className="card-title">Select an Image</h5>
<input type="file" className='mt-3' onChange={showImagePreview} />
</div>
</div>
</div>
</div>
)
In the above code, we are using JavaScript ternary operator to display either the selected image thumbnail or an icon. When the user selects an image, we are running the showImagePreview function which gets triggered on the onChange event.
JavaScript part of the Component:
const [isImageSelected, setIsImageSelected] = useState(false)
const [imagePreviewSrc, setImagePreviewSrc] = useState('')
const showImagePreview = (e) => {
let selectedFile = e.target.files.item(0)
if (selectedFile) {
if (["image/jpeg", "image/png", "image/svg+xml"].includes(selectedFile.type)) {
let fileReader = new FileReader();
fileReader.readAsDataURL(selectedFile);
fileReader.addEventListener('load', (event) => {
setImagePreviewSrc(event.target.result)
setIsImageSelected(true)
})
}
} else {
setIsImageSelected(false)
}
}
We have two state variables, isImageSelected which is used to show either the image thumbnail or icon, imagePreviewSrc which is used to hold the source of the selected image file.
We are using browser’s FileReader object to read the data of the selected image.
Complete Component file:
import React, { useState } from 'react'
function SingleImagePreview() {
const [isImageSelected, setIsImageSelected] = useState(false)
const [imagePreviewSrc, setImagePreviewSrc] = useState('')
const showImagePreview = (e) => {
let selectedFile = e.target.files.item(0)
if (selectedFile) {
if (["image/jpeg", "image/png", "image/svg+xml"].includes(selectedFile.type)) {
let fileReader = new FileReader();
fileReader.readAsDataURL(selectedFile);
fileReader.addEventListener('load', (event) => {
setImagePreviewSrc(event.target.result)
setIsImageSelected(true)
})
}
} else {
setIsImageSelected(false)
}
}
return (
<div className="card mb-3 mt-5" style={{ "maxWidth": "540px" }} >
<div className="row g-0">
<div className="col-md-4">
{isImageSelected ?
<img src={imagePreviewSrc} className="img-fluid rounded-start" alt="..." />
:
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" fill="currentColor"
className="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 className="col-md-8">
<div className="card-body">
<h5 className="card-title">Select an Image</h5>
<input type="file" className='mt-3' onChange={showImagePreview} />
</div>
</div>
</div>
</div>
)
}
export default SingleImagePreview
Check this post, if you want to implement the same using Vanilla JavaScript How to Show Preview of the Selected Image in JavaScript
Leave A Comment