Upload a File / Multiple Files in React | Updated Guide 2024

69

In today’s web development landscape, enabling file uploads is a frequent necessity. React, with its robust ecosystem and vast libraries, provides convenient solutions for integrating file upload functionality. In this revised guide, we’ll delve into implementing single file uploads, handling multiple files, and showcasing the uploaded files within a React application.

Single File Upload

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

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

function SingleFileUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

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

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

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

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={!selectedFile}>Upload</button>
    </div>
  );
}

export default SingleFileUpload;

Multiple Files Upload

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

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

function MultipleFilesUpload() {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (event) => {
    setSelectedFiles([...selectedFiles, ...event.target.files]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    selectedFiles.forEach((file) => {
      formData.append('files', file);
    });

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

  return (
    <div>
      <input type="file" onChange={handleFileChange} multiple />
      <button onClick={handleUpload} disabled={selectedFiles.length === 0}>Upload</button>
    </div>
  );
}

export default MultipleFilesUpload;

Display Uploaded Files

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

function UploadedFilesDisplay() {
  const [uploadedFiles, setUploadedFiles] = useState([]);

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

  return (
    <div>
      <h2>Uploaded Files</h2>
      <ul>
        {uploadedFiles.map((file, index) => (
          <li key={index}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UploadedFilesDisplay;

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

Conclusion

In conclusion, mastering file uploads in React is crucial for modern web applications, and this updated guide provides comprehensive insights into implementing both single and multiple file upload functionalities. By following the outlined steps and leveraging React’s powerful ecosystem, developers can enhance user experiences and add valuable features to their projects. Whether it’s a single image or multiple files, React offers flexible solutions to meet various upload requirements, empowering developers to create dynamic and interactive applications.

Upload a File / Multiple Files in React – FAQs