Image Previews in React: A Step-by-Step Guide

Introduction

When it comes to uploading images, clients often need to preview them before sending them to the server. In this article, we’ll explore how to preview images in a React application using the FileReader API.

Browsing Image Files in React

To add file upload functionality to your web application, you can use an input element of type “file”. This allows users to select single or multiple files from their device.

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


Introduction to the FileReader API

The FileReader API provides an interface for asynchronously reading the contents of a file. We’ll use this API to read the selected image files and preview them.

Previewing Single Images

To preview a single image, we’ll create a React component that uses the FileReader API to read the selected file.

“`jsx
import React, { useState, useEffect } from ‘react’;

const SingleImagePreview = () => {
const [image, setImage] = useState(null);
const [preview, setPreview] = useState(null);

const handleFileChange = (event) => {
const file = event.target.files[0];
setImage(file);
};

useEffect(() => {
if (image) {
const reader = new FileReader();
reader.onload = (event) => {
setPreview(event.target.result);
};
reader.readAsDataURL(image);
}
}, [image]);

return (

{preview && }

);
};
“`

Previewing Multiple Images

To preview multiple images, we’ll modify the previous code to handle multiple files.

“`jsx
import React, { useState, useEffect } from ‘react’;

const MultipleImagePreview = () => {
const [images, setImages] = useState([]);
const [previews, setPreviews] = useState([]);

const handleFileChange = (event) => {
const files = event.target.files;
setImages(files);
};

useEffect(() => {
if (images.length > 0) {
const readers = [];
images.forEach((image) => {
const reader = new FileReader();
reader.onload = (event) => {
setPreviews((prevPreviews) => […prevPreviews, event.target.result]);
};
reader.readAsDataURL(image);
readers.push(reader);
});
return () => {
readers.forEach((reader) => reader.abort());
};
}
}, [images]);

return (

{previews.map((preview, index) => (

))}

);
};
“`

By following these steps, you can easily add image preview functionality to your React application using the FileReader API. Whether you need to preview single or multiple images, this guide has got you covered.