Handling file uploads and downloads with Redux in JavaScript

14 Sep 2023

Redux

In modern web applications, handling file uploads and downloads is a common requirement. With the help of Redux, a predictable state container for JavaScript apps, we can easily manage the state of file uploads and downloads in a clean and efficient manner. In this blog post, we will explore how to handle file uploads and downloads using Redux in JavaScript.

Working with File Uploads

Managing file uploads with Redux involves handling three main steps: selecting the file, uploading the file, and tracking the upload progress.

Selecting the File

To select a file for upload, we can use the HTML <input type="file"> element. When the user selects a file, we can capture the file details and dispatch an action to update the Redux state.

// FileUploadInput.js

import React from 'react';
import { useDispatch } from 'react-redux';
import { uploadFile } from './redux/actions';

const FileUploadInput = () => {
  const dispatch = useDispatch();

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    dispatch(uploadFile(file));
  };

  return (
    <input type="file" onChange={handleFileUpload} />
  );
};

export default FileUploadInput;

Uploading the File

Once the file is selected, we can initiate the upload process using an API call. We will dispatch an action to update the state indicating that the file upload has started. After the file is successfully uploaded, we can dispatch another action to update the state with the uploaded file details.

// actions.js

export const uploadFile = (file) => {
  return (dispatch) => {
    dispatch({ type: 'UPLOAD_FILE_START' });

    // Make API call to upload the file
    api.uploadFile(file)
      .then((response) => {
        dispatch({ type: 'UPLOAD_FILE_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        dispatch({ type: 'UPLOAD_FILE_FAILURE', payload: error.message });
      });
  };
};

Tracking the Upload Progress

To track the upload progress, we can listen to the ‘progress’ event provided by the XHR (XMLHttpRequest) object. This event is triggered periodically during the file upload process, allowing us to calculate the progress percentage and update the Redux state accordingly.

// reducers.js

const initialState = {
  file: null,
  uploadProgress: 0,
};

export const fileReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPLOAD_FILE_START':
      return { ...state, uploadProgress: 0 };
    case 'UPLOAD_FILE_PROGRESS':
      return { ...state, uploadProgress: action.payload };
    case 'UPLOAD_FILE_SUCCESS':
      return { ...state, file: action.payload, uploadProgress: 100 };
    case 'UPLOAD_FILE_FAILURE':
      return { ...state, uploadProgress: 0 };
    default:
      return state;
  }
};

Working with File Downloads

To handle file downloads with Redux, we need to initiate a file download and update the Redux state accordingly.

// actions.js

export const downloadFile = (fileId) => {
  return (dispatch) => {
    dispatch({ type: 'DOWNLOAD_FILE_START' });

    // Make API call to download the file
    api.downloadFile(fileId)
      .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.txt');
        document.body.appendChild(link);
        link.click();
        dispatch({ type: 'DOWNLOAD_FILE_SUCCESS' });
      })
      .catch((error) => {
        dispatch({ type: 'DOWNLOAD_FILE_FAILURE', payload: error.message });
      });
  };
};

Below is an example of how you can trigger the file download with a button click:

// FileDownloadButton.js

import React from 'react';
import { useDispatch } from 'react-redux';
import { downloadFile } from './redux/actions';

const FileDownloadButton = () => {
  const dispatch = useDispatch();

  const handleDownload = () => {
    dispatch(downloadFile(fileId));
  };

  return (
    <button onClick={handleDownload}>Download File</button>
  );
};

export default FileDownloadButton;

Conclusion

Handling file uploads and downloads with Redux in JavaScript allows us to manage the state of uploads and downloads in a predictable and scalable way. By defining actions and reducers, we can easily handle file-related operations and provide a seamless user experience. With the example code provided in this blog post, you can start implementing file uploads and downloads in your Redux-powered applications.

#Redux #JavaScript