How to Use the FileReader API to Preview Images Before Upload in JavaScript

How to Use the FileReader API to Preview Images Before Upload in JavaScript Previewing images before uploading them is a small but powerful enhancement for any user-facing application. It improves UX by showing users exactly what they’re about to send, reduces upload errors, and adds a layer of polish to your interface. In this tutorial, we’ll walk through how to use the FileReader API to preview images using plain JavaScript — no frameworks, no libraries. Step 1: Set Up the HTML Structure We need a file input element and an image tag to display the preview: Step 2: Access the File From the Input We’ll listen for changes on the file input and extract the selected file: const input = document.getElementById('imageInput'); const preview = document.getElementById('imagePreview'); input.addEventListener('change', function () { const file = input.files[0]; if (file) { readAndPreview(file); } }); Step 3: Read the File With FileReader The FileReader object reads the image file as a Data URL, which we’ll assign to the src of the image element: function readAndPreview(file) { const reader = new FileReader(); reader.addEventListener('load', function () { preview.src = reader.result; }); reader.readAsDataURL(file); } Step 4: Add Basic Error Handling It's good practice to validate the file type before previewing it: if (!file.type.startsWith('image/')) { alert('Please select a valid image file.'); return; } Add that logic inside the change event listener if needed. Conclusion This technique is incredibly useful for forms, CMS dashboards, social apps, and anywhere users upload images. It requires no libraries, works in all modern browsers, and adds immediate visual feedback. The FileReader API is simple, elegant, and often overlooked — but it’s a tool every modern web developer should be comfortable using. Happy coding! If you found this post helpful, consider supporting my work: ☕ Buy me a coffee

Apr 9, 2025 - 05:52

How to Use the FileReader API to Preview Images Before Upload in JavaScript

Previewing images before uploading them is a small but powerful enhancement for any user-facing application. It improves UX by showing users exactly what they’re about to send, reduces upload errors, and adds a layer of polish to your interface. In this tutorial, we’ll walk through how to use the FileReader API to preview images using plain JavaScript — no frameworks, no libraries.

Step 1: Set Up the HTML Structure

We need a file input element and an image tag to display the preview:

Step 2: Access the File From the Input

We’ll listen for changes on the file input and extract the selected file:

const input = document.getElementById('imageInput');
const preview = document.getElementById('imagePreview');

input.addEventListener('change', function () {
  const file = input.files[0];
  if (file) {
    readAndPreview(file);
  }
});

Step 3: Read the File With FileReader

The FileReader object reads the image file as a Data URL, which we’ll assign to the src of the image element:

function readAndPreview(file) {
  const reader = new FileReader();

  reader.addEventListener('load', function () {
    preview.src = reader.result;
  });

  reader.readAsDataURL(file);
}

Step 4: Add Basic Error Handling

It's good practice to validate the file type before previewing it:

if (!file.type.startsWith('image/')) {
  alert('Please select a valid image file.');
  return;
}

Add that logic inside the change event listener if needed.

Conclusion

This technique is incredibly useful for forms, CMS dashboards, social apps, and anywhere users upload images. It requires no libraries, works in all modern browsers, and adds immediate visual feedback. The FileReader API is simple, elegant, and often overlooked — but it’s a tool every modern web developer should be comfortable using.

Happy coding!

If you found this post helpful, consider supporting my work:

☕ Buy me a coffee