Managing Multi-File Upload Progress with React and Redux

Introduction:

Multi-file uploads are a common requirement in modern web applications. Whether you’re building a file-sharing platform, a media management system, or any application involving user-generated content, efficient handling of file uploads is crucial. In this tutorial, we’ll explore how to manage the progress of multi-file uploads in React using Redux, a popular state management library. We’ll cover the steps to track, display, and control the progress of file uploads seamlessly.

Prerequisites:

Before we dive into the implementation, make sure you have the following prerequisites:

1. Basic knowledge of React and Redux.
2. A development environment set up with React and Redux.

The Upload Component:

Let’s start by creating a simple React component responsible for handling file uploads. This component will allow users to select multiple files and initiate the upload process.

import React, { useState } from 'react';

function FileUpload() {
  const [selectedFiles, setSelectedFiles] = useState([]);
  
  const handleFileChange = (e) => {
    const files = e.target.files;
    setSelectedFiles([...selectedFiles, ...files]);
  };

  const handleUpload = () => {
    // Implement file upload logic here
  };

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

export default FileUpload;

Managing Upload Progress with Redux:

To manage the upload progress for each file, we’ll create a Redux slice to store the progress data. Here’s a simplified example of what your Redux slice might look like:

// uploadSlice.js
import { createSlice } from '@reduxjs/toolkit';

const uploadSlice = createSlice({
  name: 'upload',
  initialState: {},
  reducers: {
    setProgress: (state, action) => {
      const { fileId, progress } = action.payload;
      state[fileId] = progress;
    },
  },
});

export const { setProgress } = uploadSlice.actions;
export default uploadSlice.reducer;

Integrating Redux in File Upload Component:

Now, let’s integrate Redux into our file upload component. We’ll dispatch actions to update the upload progress in the Redux store as the files are being uploaded.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setProgress } from './uploadSlice';

function FileUpload() {
  const dispatch = useDispatch();
  const [selectedFiles, setSelectedFiles] = useState([]);

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

  const handleUpload = () => {
    selectedFiles.forEach((file) => {
      // Implement file upload logic here
      // Track upload progress and dispatch actions to update Redux store
    });
  };

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

export default FileUpload;

Displaying Progress:

To provide real-time feedback to users, you can create a progress bar component that reads the upload progress from the Redux store and displays it visually. This component can listen for changes in the Redux store and update the UI accordingly.

Conclusion:

Handling multi-file uploads with progress tracking in React using Redux allows you to create a seamless and user-friendly experience. By following the steps outlined in this tutorial, you can efficiently manage file uploads, keep users informed about the progress, and build robust web applications that handle user-generated content with ease.