Implementing Pause and Resume for Large File Uploads in React Using Filestack

The Filestack SDK provides a robust solution for handling large file uploads in React applications, featuring pause and resume functionality to mitigate upload failures due to network interruptions. By leveraging Filestack’s chunked upload approach, developers can ensure a seamless and reliable upload experience for users.

Filestack’s SDK allows for the upload of large files to be broken down into smaller chunks, enabling the pause and resume of uploads without losing progress. This is particularly beneficial for users with unstable internet connections, as it prevents the need to restart uploads from the beginning in the event of a disruption.

Why This Matters

The implementation of pause and resume functionality for large file uploads is crucial for providing a good user experience, especially in applications where users may be uploading large files such as videos or high-resolution images. Without this functionality, upload failures due to network issues can lead to frustration and a negative user experience, potentially resulting in abandoned uploads and lost productivity.

Key Insights

Filestack’s SDK supports chunked uploads, allowing for pause and resume functionality.
The filestack-js library provides a simple and intuitive API for integrating Filestack’s upload functionality into React applications.
Handling network interruptions automatically using the navigator.onLine property can further enhance the upload experience by pausing and resuming uploads seamlessly.

Working Example

import React, { useState, useRef } from "react";
import * as filestack from "filestack-js";

const ResumableFileUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadStatus, setUploadStatus] = useState("idle");
  const uploadInstanceRef = useRef(null);
  const filestackClientRef = useRef(null);

  const startUpload = async () => {
    // Initialize Filestack client and upload control token
    const uploadControl = {};
    uploadInstanceRef.current = uploadControl;
    const uploadOptions = {
      intelligent: true,
      intelligentChunkSize: 8 * 1024 * 1024,
      timeout: 60000,
      onProgress: (event) => {
        const percent = Math.round(event.totalPercent || 0);
        setUploadProgress(percent);
      },
    };
    try {
      const result = await filestackClientRef.current.upload(
        selectedFile,
        uploadOptions,
        { filename: selectedFile.name },
        uploadControl
      );
      setUploadedFileUrl(`https://cdn.filestackcontent.com/${result.handle}`);
      setUploadStatus("completed");
      setUploadProgress(100);
    } catch (error) {
      setUploadStatus("error");
      setErrorMessage(error.message || "Upload failed");
      console.error("Upload error:", error);
    }
  };

  return (
    <div className="upload-container">
      <h2>Resumable File Upload</h2>
      <input
        type="file"
        onChange={(event) => setSelectedFile(event.target.files[0])}
      />
      <button onClick={startUpload}>Start Upload</button>
      <p>Status: {uploadStatus}</p>
      <p>Progress: {uploadProgress}%</p>
    </div>
  );
};

export default ResumableFileUpload;

Practical Applications

Use Case: Implementing pause and resume functionality in a video sharing platform to ensure reliable uploads of large video files.
Pitfall: Failing to handle network interruptions properly, leading to upload failures and a poor user experience.

References:

On This Page

Implementing Pause and Resume for Large File Uploads in React Using Filestack