Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Unable to upload .tar.gz file greater than 500Mb

I want to upload a .tar.gz file (>500mb) to a URL using javascript.

Here is my approach

async uploadMapFile(url, FilePath, mapType) {
  try {
    let body = await _fs.promises.readFile(FilePath);
    let contentType =
      mapType === "navi" ? "application/zip" : "application/tar+gzip";
    const { data } = await axios.put(url, body, {
      headers: {
        "Access-Control-Allow-Origin": process.env.APP_ORIGIN,
        "Content-Type": contentType,
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Credentials": "true"
      }
    });

    console.log("After uploading file", data, mapType);
    //Removing the uploaded folder
    await this.afterFileUpload(mapType);
    this.store.mapUploadFlag = false;
  } catch (error) {
    console.log(error);
    this.store.mapUploadFailed = true;
  }
},

Using the above code I can upload smaller files but not able to upload larger files.
In case of larger files, the app crashes.

Tags:

2

Answers


  1. 0

    Are you using Chrome? Chrome seems to have a Blob limit of 500mb, restricting the request size to about 500mb. See this chromium issue You could try uploading using firefox, to see if the issue persists.

    Login or Signup to reply.
  2. 0

    Check out this chunked uploading method:

    const axios = require('axios');
const fs = require('fs');
const path = require('path');

async function uploadMapFile(url, filePath, mapType) {
  const contentType = mapType === "navi" ? "application/zip" : "application/tar+gzip";

  const fileStream = fs.createReadStream(filePath);
  const fileSize = fs.statSync(filePath).size;

  const config = {
    headers: {
      'Content-Type': contentType,
      'Content-Length': fileSize,
      'Access-Control-Allow-Origin': process.env.APP_ORIGIN,
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Credentials': 'true'
    }
  };

  try {
    const response = await axios.post(url, fileStream, config);
    console.log("Upload successful", response.data);
    // Removing the uploaded folder
    await afterFileUpload(mapType);
    console.log("Upload finished");
  } catch (error) {
    console.error("Upload failed", error);
    // Handle error
  }
}

// Usage
const url = 'https://example.com/upload';
const filePath = '/path/to/your/file.tar.gz';
const mapType = 'navi';

uploadMapFile(url, filePath, mapType);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search