Upload a Single Image / Multiple Images in React | Updated Guide 2024

78

In the realm of modern web development, enabling users to upload images is a common requirement. React, with its powerful ecosystem and extensive libraries, offers straightforward solutions for implementing image uploads. In this updated guide, we’ll explore how to upload a single image, multiple images, and display uploaded images in a React application.

Single Image Upload

First, let’s start with implementing a component for uploading a single image.

import React, { useState } from 'react';
import axios from 'axios';

function SingleImageUpload() {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageChange = (event) => {
    setSelectedImage(event.target.files[0]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append('image', selectedImage);

    try {
      const response = await axios.post('https://example.com/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log('Image uploaded successfully:', response.data);
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} accept="image/*" />
      <button onClick={handleUpload} disabled={!selectedImage}>Upload</button>
    </div>
  );
}

export default SingleImageUpload;

Multiple Images Upload

Now, let’s extend our functionality to support uploading multiple images.

import React, { useState } from 'react';
import axios from 'axios';

function MultipleImagesUpload() {
  const [selectedImages, setSelectedImages] = useState([]);

  const handleImageChange = (event) => {
    setSelectedImages([...selectedImages, ...event.target.files]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    selectedImages.forEach((image) => {
      formData.append('images', image);
    });

    try {
      const response = await axios.post('https://example.com/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log('Images uploaded successfully:', response.data);
    } catch (error) {
      console.error('Error uploading images:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} accept="image/*" multiple />
      <button onClick={handleUpload} disabled={selectedImages.length === 0}>Upload</button>
    </div>
  );
}

export default MultipleImagesUpload;

Display Uploaded Images

Finally, let’s create a component to display the uploaded images.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UploadedImagesDisplay() {
  const [uploadedImages, setUploadedImages] = useState([]);

  useEffect(() => {
    const fetchUploadedImages = async () => {
      try {
        const response = await axios.get('https://example.com/images');
        setUploadedImages(response.data);
      } catch (error) {
        console.error('Error fetching uploaded images:', error);
      }
    };
    fetchUploadedImages();
  }, []);

  return (
    <div>
      <h2>Uploaded Images</h2>
      <div className="image-container">
        {uploadedImages.map((image, index) => (
          <img key={index} src={image.url} alt={`Image ${index}`} />
        ))}
      </div>
    </div>
  );
}

export default UploadedImagesDisplay;

With these components, you can effortlessly implement image upload functionality in your React application, whether it’s for a single image or multiple images, and display the uploaded images for users to interact with.

Conclusion

By following these steps, you can implement image upload functionality in your React JS application. Whether you need to upload single or multiple images, and then display them, these components provide a simple and efficient solution for handling image-related tasks in your application.

Upload a Single Image / Multiple Images in React – FAQs