Preview a user image before it is uploaded
Last updated: September 27, 2022.
You can preview a user-uploaded image in the browser before it is uploaded using frontend JavaScript.
Additionally, you can use CSS to style the appearance of the image and JavaScript to perform checks on it dimensions and size.
Table of contents
Creating an image preview
The markup
In the HTML markup all you need is an <input>
and <div>
element.
On the <input>
element, the type attribute should be set to file. Optionally, you can prevent a user from selecting a non-image file by setting the accept attribute to image/*
<input id="upload-input" type="file" accept="image/*">
<div id="preview"></div>
Accepting images
To accept image types on an individual basis, write image/
followed by the image type (e.g. image/png
, img/jpeg
) in a comma-separated list.
There is no <img>
element in the markup because we will create it in JavaScript and then insert it inside the <div>
element.
JavaScript
Now in JavaScript, select both elements.
You need to add an event listener to the input element that will fire a function.
Listening out for an input event will fire the function every time the user selects a file.
Now for the magic: use window.URL.createObjectURL()
and pass in the file the user has selected (it’s available inside an array on the files
property). This creates a temporary URL for the image in the user’s browser.
Now, create an image element, use the URL to set the src
attribute and append the result to the DOM.
const input = document.getElementById('upload-input');
const previewEl = document.getElementById('preview');
input.addEventListener('input', function() {
// Create URL
const imgURL = window.URL.createObjectURL(input.files[0]);
// Create image and append
const img = document.createElement('img');
img.src = imgURL;
previewEl.appendChild(img);
});
Styling the preview
You can use CSS to change the appearance of the preview image.
For example, the below class sets the width of the image to 500px, give it a circular border and sets coloring to black and white.
.preview-image {
width: 500px;
border-radius: 100%;
filter: grayscale(100%);
}
To apply your CSS to the preview image, add the class to the image element's attribute list.
const input = document.getElementById('upload-input');
const previewEl = document.getElementById('preview');
input.addEventListener('input', function() {
const imgURL = window.URL.createObjectURL(input.files[0]);
const img = document.createElement('img');
img.src = imgURL;
img.className = "preview-image"; // <- Setting the class attribute
previewEl.appendChild(img);
});
Optional extras
Checking image size
You can provide file size validation via the size property on the selected file:
const input = document.getElementById('upload-input');
const previewEl = document.getElementById('preview');
input.addEventListener('input', function() {
// Image size check: if greater than a MB...
if (input.files[0].size > 1000000) {
// Create message for user
previewEl.textContent = "File too big!";
// Throw error to stop further code execution
throw new Error("File too big!");
}
const imgURL = window.URL.createObjectURL(input.files[0]);
const img = document.createElement('img');
img.src = imgURL;
img.className = "preview-image";
previewEl.appendChild(img);
});
Checking image dimensions
You can check the dimensions of the image selected by the user and handle accordingly.
To do so, create a new image object by calling the Img()
constructor. Set its src
attribute to the image link.
Now, you'll want to add an event listener to the image object that will fire its associated function when the image has loaded. This is necessary because the dimensions of the image are not known before it has loaded, so it is necessary to wait.
Now, you can check the dimension of the image via the width
and height
property on the image object.
If the dimensions are incorrect, you'll want to alert the user and throw an error to stop further code execution.
const input = document.getElementById('upload-input');
const previewEl = document.getElementById('preview');
input.addEventListener('input', function() {
const imgURL = window.URL.createObjectURL(input.files[0]);
checkImageDimensions(imgURL); // <- Call new checkImageDimensions function with link as argument
const img = document.createElement('img');
img.src = imgURL;
img.className = "preview-image";
previewEl.appendChild(img);
});
function checkImageDimensions(url) {
// Create new image object and set src to link
const img = new Image();
img.src = url;
// When image has loaded...
img.addEventListener('load', function() {
// Check dimensions
if (img.width > 400 || img.height > 400) {
// If dimensions out of range, tell user and throw error
previewEl.textContent = "Image exceeds maximum dimensions";
new Error("Dimensions error");
} else {
// Optional log to console if dimensions are in range
console.log("Image dimensions OK");
}
})
}
Complete code
<style>
.preview-image {
width: 500px;
border-radius: 100%;
filter: grayscale(100%);
}
</style>
<input id="upload-input" type="file" accept="image/*">
<div id="preview"></div>
<script>
const input = document.getElementById('upload-input');
const previewEl = document.getElementById('preview');
input.addEventListener('input', function() {
// Size check (in bytes)
if (input.files[0].size > 1000000) {
previewEl.textContent = "File too big!";
throw new Error("File too big!");
}
const imgURL = window.URL.createObjectURL(input.files[0]);
checkImageDimensions(imgURL); // Dimensions check
const img = document.createElement('img');
img.src = imgURL;
img.className = "preview-image";
previewEl.appendChild(img);
});
function checkImageDimensions(url) {
const img = new Image();
img.src = url;
img.addEventListener('load', function() {
if (img.width > 1000 || img.height > 1000) {
previewEl.textContent = "Image exceeds maximum dimensions";
new Error("Dimensions error");
} else {
console.log("Image dimensions OK");
}
})
}
</script>
Related links
- OpenJavaScript: How to upload a file using the Fetch API
- MDN Web Docs: URL.createObjectURL()