Preview an image before it is uploaded

Optimizing previews with Blob URLs

Generating blob URLs can be faster and less memory-intensive than using FileReader, especially for larger files. Use the URL.createObjectURL() method to create a blob URL:

document.querySelector('input[type="file"]').onchange = event => {
  const [file] = event.target.files;
  // Checking if file exists
  if (file) {
    document.getElementById('preview').src = URL.createObjectURL(file);
    // Just blobs doing blob things
  }
};


Memory resource management

It's important to clean up resources after use to prevent memory leaks. Revoke the blob URL after the image is no longer needed:

const imgPreview = document.getElementById('preview');
imgPreview.onload = () => URL.revokeObjectURL(imgPreview.src);
// Housekeeping: blob URLs do not clean themselves up


Handling multiple images

For multiple image previews, iterate over the files array and create previews for each image:

document.querySelector('input[type="file"]').onchange = event => {
  const fileList = event.target.files;
  
  // Existing previews be gone!
  const previewContainer = document.getElementById('preview-container');
  previewContainer.innerHTML = '';

  // File looping, not just for DJs
  for (let file of fileList) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    // Avoid memory leaks like the plague
    img.onload = () => URL.revokeObjectURL(img.src); 
    previewContainer.appendChild(img);
  }
};


Prepare your HTML for multiple previews:

<input type="file" multiple accept="image/*"/>
<div id="preview-container"></div>


Solutions for older browsers

IE does not support FileReader and URL.createObjectURL, but you can use proprietary CSS filter properties with IE-specific script wrapped in HTML conditional comments when required.

Consider performance and user experience

Your users and servers will thank you for showing the selected image preview before sending uploads to the server, saving bandwidth and resources.

In addition, use CSS to ensure that your large image previews don't escape their bounding box:

#preview { 
  max-width: 100%;
  max-height: 300px;
}


Lastly, use semantic HTML for a better UX with your image input and previews. A solid interface is always a win!