Uploading large files can be a real hassle, especially if you’re building an application with a large number of users. The standard approach of uploading a large file all at once can result in slow upload times. Moreover, it imposes a higher risk of network errors and an overall poor user experience. However, we can overcome these challenges by providing our users with a ReactJS file upload experience. Filestack is one such example.  

When it comes to uploading large files, it can be a real hassle. This article will show you how to upload large files as chunks using ReactJS file upload. Let’s get started!

Upload Large Files as Chunks Using ReactJS

Why Should We Upload Files as Chunks?

The chunk upload concept involves breaking a large file into smaller chunks. It involves uploading each chunk separately and then combining the chunks on the server side to form the complete file. This approach has several advantages over uploading a large file all at once:

Reduced Risk of Network Errors

By uploading smaller chunks, we reduce the risk of network errors during the upload process. If a chunked upload fails, we can retry uploading that chunk without having to start the process all over again.

Improved Upload Speed.

Uploading smaller chunks allows for more efficient network bandwidth use and reduces the risk of hitting upload size limits.

Better User Experience

Uploading large files in chunks provides a more seamless user experience. The reason is that the users can see the progress of their upload. Moreover, they are less likely to encounter errors during the upload process.

Upload Large Files as Chunks Using ReactJS

What Are The Steps To Upload Large Files as Chunks Using React JS?

Here are the steps to upload large files as chunks using ReactJS:

Set up a Reactjs Project.

Before we dive into the chunk upload functionality, we need to set up a ReactJS project. If you already have a project set up, feel free to skip this section.

Install Node.js and npm: Node.js and npm are essential for setting up a ReactJS project. We can download them from the official website (https://nodejs.org/en/).

Create a new project: To create a new project, we can use the following command in our terminal:

npx create-react-app my-app

Navigate to the project directory: After creating a new project, navigate to the project directory using the following command:

cd my-app

Start the development server: Start the development server using the following command:

npm start

Now that we have set up a ReactJS project, let’s dive into the chunk upload functionality.

Break the Large File Into Smaller Chunks.

Read the file using the File API in JavaScript. We have to use the FileReader object to read the file and access its data.

The next step is to determine the chunk size. Decide on the desired chunk size, typically in the range of a few kilobytes to several megabytes.

Then, we must split the file into chunks. In this case, we have to use the slice method of the Blob object to split the file into chunks of the desired size.

let chunkSize = 5 * 1024 * 1024; // 5 MB chunk size
let chunks = [];
let fileSize = file.size;
let start = 0;
let end = chunkSize;

while (start < fileSize) {
  chunks.push(file.slice(start, end));
  start = end;
  end = start + chunkSize;
}

Send Each Chunk to the Server Using Axios or a Similar Library

Then, we have to upload each chunk. For this purpose, we must iterate through the chunks array and send each chunk to the server using Axios. We can also use a similar library for making HTTP requests. This is a basic implementation of breaking a large file into smaller chunks in JavaScript. We can further customize the implementation based on our specific use case and requirements.

Axios makes sending HTTP requests easy and handles the response data in a ReactJS project.

import axios from ‘axios’;

let uploadPromises = [];

chunks.forEach((chunk, index) => {
  let formData = new FormData();
  formData.append(‘chunk’, chunk, `chunk-${index}`);

  let uploadPromise = axios.post(‘/upload’, formData);
  uploadPromises.push(uploadPromise);
});

Promise.all(uploadPromises)
  .then(responses => {
    console.log(‘All chunks uploaded successfully!’);
  })
  .catch(error => {
    console.error(‘Error uploading chunks:’, error);
  });

On the Server Side, Receive and Store Each Chunk.

In the server-side code, you can create an endpoint using Node.js and Express to temporarily receive and store the chunks. A middleware library such as Multer can be used to handle the file upload and access the uploaded file data.

const express = require(‘express’);
const multer = require(‘multer’);
const app = express();
const port = process.env.PORT || 5000;

const upload = multer();

app.post(‘/upload’, upload.single(‘chunk’), (req, res) => {
  let chunk = req.file;

  // Store the chunk temporarily
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

After All, the Chunks Have Been Uploaded, Combine Them to Form the Complete File

This can be done by creating a new Blob object and concatenating all the chunks using the Blob.concat method. Once the complete file has been formed, it can be saved to a permanent storage location such as a database or a file system.

let chunks = [];

app.post(‘/upload’, upload.single(‘chunk’), (req, res) => {
  let chunk = req.file;

  chunks.push(chunk);

  // Once all the chunks have been uploaded, combine them to form the complete file
  if (chunks.length === totalChunks) {
    let completeFile = new Blob(chunks);

    // Save the complete file to a permanent storage location
  }
});

It’s important to keep track of the number of chunks that have been uploaded and the total number of chunks to ensure that all chunks have been uploaded before combining them to form the complete file. Additionally, it’s also a good idea to implement some error handling to ensure that the complete file is only formed and saved if all chunks have been uploaded successfully.

Store the Complete File in a Database or on the File System. 

Storing the complete file in a database or on the file system is the final step in the process of uploading large files as chunks using ReactJS.

When storing the file in a database, it’s common to use a binary large object (BLOB) data type to store the file data. The BLOB data type can store large amounts of binary data, such as an image, audio, or video file. To store the complete file in a database, we can convert the Blob object to a binary string using the FileReader API. Then, we can save the binary string in the BLOB field in the database.

let chunks = [];

app.post(‘/upload’, upload.single(‘chunk’), (req, res) => {
  let chunk = req.file;

  chunks.push(chunk);

  // Once all the chunks have been uploaded, combine them to form the complete file
  if (chunks.length === totalChunks) {
    let completeFile = new Blob(chunks);

    let reader = new FileReader();
    reader.readAsDataURL(completeFile);
    reader.onload = function() {
      let binaryString = reader.result;

      // Store the binary string in the BLOB field in the database
    };
  }
});

We can also use the fs module in Node.js to write the complete file to a permanent storage location.

let chunks = [];

app.post(‘/upload’, upload.single(‘chunk’), (req, res) => {
  let chunk = req.file;

  chunks.push(chunk);

  // Once all the chunks have been uploaded, combine them to form the complete file
  if (chunks.length === totalChunks) {
    let completeFile = new Blob(chunks);

    let reader = new FileReader();
    reader.readAsArrayBuffer(completeFile);
    reader.onload = function() {
      let buffer = Buffer.from(reader.result);

      // Write the buffer to a permanent storage location on the file system
      fs.writeFile(`./uploads/${completeFile.name}`, buffer, function(err) {
        if (err) {
          console.error(err);
        } else {
          console.log(‘File uploaded successfully’);
        }
      });
    };
  }
});

Return a Successful Response to the Client to Indicate That the Upload Was Successful.

Once the complete file has been stored in a database or on the file system, it’s important to return a successful response to the client to indicate that the upload was successful.

In a ReactJS application, we can use the fetch API or a library like Axios to make a POST request to the server and receive the response. The response from the server can be a JSON object that indicates whether the upload was successful or not.

Here’s an example of how to return a successful response in a Node.js server:

app.post(‘/upload’, upload.single(‘chunk’), (req, res) => {
  let chunk = req.file;

  chunks.push(chunk);

  // Once all the chunks have been uploaded, combine them to form the complete file
  if (chunks.length === totalChunks) {
    let completeFile = new Blob(chunks);

    let reader = new FileReader();
    reader.readAsArrayBuffer(completeFile);
    reader.onload = function() {
      let buffer = Buffer.from(reader.result);

      // Write the buffer to a permanent storage location on the file system
      fs.writeFile(`./uploads/${completeFile.name}`, buffer, function(err) {
        if (err) {
          console.error(err);
        } else {
          // Return a successful response to the client
          res.status(200).json({ message: ‘File uploaded successfully’ });
        }
      });
    };
  }
});

Why Should We Choose Filestack For Large Files Uploading?

Filestack is a cloud-based file-handling and file-uploading platform that provides a convenient and efficient way to handle large files. Filestack can handle a large volume of file uploads and transfers, making it ideal for businesses and applications that handle a lot of data.

Filestack uses a globally distributed network of servers to ensure that file uploads and transfers are fast, reliable, and secure. Moreover, it is optimized for performance, which means that large files can be uploaded and transferred quickly and efficiently. Filestack provides a simple and intuitive user interface that makes it easy for users to upload large files and manage their files.

Apart from that, it provides a wide range of integration options, including a REST API and an SDK. Filestack also comes with cost-effective and secure file-uploading solutions. 

Upload Large Files as Chunks Using ReactJS

Final Thoughts

It’s important to keep in mind that chunk uploads can add complexity to the overall file upload process, so make sure to thoroughly test your implementation before deploying it to production. 

Additionally, we should consider using a backend service such as Amazon S3 or Google Cloud Storage to handle the actual storage of the uploaded file chunks, as this can simplify the process and ensure that the uploaded files are stored securely. 

FAQs

What Is a File Juggler?

File Juggler is used for automatic file management. 

What Is CDN Filestack Content?

Filestack uses CDN to help us secure and fast access our assets.

Is Facebook a File-Sharing Site?

Yes. Facebook has made it a lot easier to share our daily activities. 

Is CDN a Database?

No, CDN (Content Delivery Network) is not a database. A CDN is a system of distributed servers that deliver web content to a user based on their geographic location, the origin of the webpage, and the content delivery server.

 

Author

Sumit is a Tech and Gadget freak and loves writing about Android and iOS, his favourite past time is playing video games.

Write A Comment