Preview an Image Before Uploading with JavaScript

You will learn how browser file inputs expose selected files to JavaScript and how to display an image preview locally with URL.createObjectURL(). You will also learn to validate file types, clean up temporary Blob URLs, and handle the case where no file is selected.

A file input lets a user choose a file from their device:

<input type="file" accept="image/*">

Choosing a file does not upload it automatically. Instead, the browser makes information about the selected file available through the input element's files collection. JavaScript can use that local File object to create a temporary URL and assign it to an image element.

const file = fileInput.files[0];
const previewUrl = URL.createObjectURL(file);
image.src = previewUrl;

The image is read locally by the browser. No network request, Ajax request, or server code is required.

This matters because previews improve user experience: people can confirm that they selected the right profile picture, product image, attachment, or document before submitting a form. The actual upload can happen later, only after the user confirms the form.

Think of a selected file as a photo handed to the browser for inspection, not delivery. The browser has the photo temporarily in hand, but it has not mailed it to a server.

URL.createObjectURL(file) creates a temporary local label that an <img> element can use to find and display that photo. When the preview is no longer needed, remove the label with URL.revokeObjectURL().

• File: the locally selected image
• Blob URL: a temporary local address for that image
• <img>: the frame that displays the image
• Upload: a separate action that sends the image to a server

Use the input's change event to detect a new selection. Get the first selected file from event.target.files, then use an object URL as the image source.

<label for="imageInput">Choose an image</label>
<input id="imageInput" type="file" accept="image/*">

<img id="preview" alt="Selected image preview" hidden>

<script>
  const imageInput = document.querySelector('#imageInput');
  const preview = document.querySelector('#preview');

  imageInput.addEventListener('change', (event) => {
    const file = event.target.files[0];

    if (!file) {
      preview. = ;
      preview.();
      ;
    }

     imageUrl = .(file);
    preview. = imageUrl;
    preview. = ;

    preview.(,  {
      .(imageUrl);
    }, { :  });
  });

Consider this example:

imageInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  if (!file) return;

  if (!file.type.startsWith('image/')) {
    alert('Please choose an image file.');
    return;
  }

  const imageUrl = URL.createObjectURL(file);
  preview.src = imageUrl;
});

1. The user chooses a file in the operating system's file picker.
2. The browser fires the input's change event.
3. event.target.files[0] retrieves the first selected File object.
4. If the user cancelled the picker or cleared the field, file is missing and the function stops.
5. file.type.startsWith('image/') checks whether the browser reports an image MIME type, such as image/jpeg or image/png.

• Profile photo forms: Let users verify their portrait before saving account changes.
• E-commerce dashboards: Preview a product photo before creating or updating a listing.
• Content management systems: Show article cover-image previews before an editor publishes.
• Support forms: Let users inspect an image attachment before submitting a support request.
• Image editing tools: Display a selected local image before applying client-side transformations such as cropping or resizing.
• Multi-file galleries: Render thumbnails for several selected images before the user chooses which ones to upload.

In production code, previews are usually combined with validation, state cleanup, and accessible feedback.

Validate early with guard clauses

function showPreview(file) {
  if (!file) return;

  if (!file.type.startsWith('image/')) {
    throw new Error('Only image files are allowed.');
  }

  if (file.size > 5 * 1024 * 1024) {
    throw new Error('The image must be 5 MB or smaller.');
  }

  return URL.createObjectURL(file);
}

Replace old preview URLs

If users select multiple files one after another, revoke the old URL before creating a new one.

let currentPreviewUrl = null;

imageInput.addEventListener('change', (event) => {
  const file = event.target.[];

   (currentPreviewUrl) {
    .(currentPreviewUrl);
    currentPreviewUrl = ;
  }

   (!file || !file..()) ;

  currentPreviewUrl = .(file);
  preview. = currentPreviewUrl;
  preview. = ;
});

Trying to read the input's value as an image URL

This does not give JavaScript a usable local file path, and browsers intentionally restrict access to real paths for security.

// Do not rely on this.
preview.src = imageInput.value;

Use imageInput.files[0] and URL.createObjectURL() instead.

Forgetting that the user may cancel the picker

files[0] may be missing. Always check it first.

const file = event.target.files[0];
if (!file) return;

Trusting accept="image/*" as validation

The accept attribute filters the file picker but does not guarantee the selected file is safe or truly valid. Check file.type for user feedback, and validate again on the server when uploading.

Creating many Blob URLs without revoking them

Repeated calls to URL.createObjectURL() can retain memory until URLs are revoked or the page is unloaded. Revoke an old URL when replacing a preview, or revoke it after the image loads when it is no longer needed.

<input id="fileInput" type="file" accept="image/*">
<img id="preview" alt="Image preview" hidden>

const fileInput = document.querySelector('#fileInput');
const preview = document.querySelector('#preview');
let previousUrl;

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  if (previousUrl) URL.revokeObjectURL(previousUrl);

  if (!file || !file.type.startsWith('image/')) {
    preview.hidden = true;
    preview.removeAttribute('src');
    ;
  }

  previousUrl = .(file);
  preview. = previousUrl;
  preview. = ;
});

Can JavaScript preview an image without uploading it?

Yes. Use the File selected from an <input type="file"> and assign an object URL to an <img> element. This happens entirely in the browser.

Does URL.createObjectURL() send the image to a server?

No. It creates a temporary local Blob URL inside the browser. It does not make a network request.

Should I use FileReader or URL.createObjectURL for image previews?

For a normal image preview, use URL.createObjectURL(). Use FileReader.readAsDataURL() when you specifically need a Base64 data URL.

Why can I not use the file input value as the image source?

Browsers do not expose a real local path to page JavaScript for security reasons. Use the files collection instead.

How do I limit the file picker to images?

Add accept="image/*" to the file input. Also validate file.type in JavaScript because accept is not a security boundary.

How do I preview multiple selected images?

Use input.files, loop through each File, create an object URL for each one, and create an element for every preview.

• HTML file inputs — The browser control used to let a user select local files.
• File API — Provides File, Blob, and the files collection used by file inputs.
• Blob URLs — Temporary browser URLs created with URL.createObjectURL().
• FileReader API — An alternative way to read a file as text, an ArrayBuffer, or a data URL.
• Client-side validation — Checks file type and size before a form is submitted.
• FormData — Commonly used later to send selected files to a server.
• DOM events — The change event runs code after the user selects a file.
• Image accessibility — Meaningful alt text helps users understand the purpose of a preview.