Home / FAQs / Preview a user image before it is uploaded

Preview a user image before it is uploaded

FAQs

August 1, 2022 0

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.

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>