CODEWITHSUNDEEP
node.jsreactjsnginxfile-uploadaxios
SudoGaron
SudoGaron

Reputation: 438

How do you increase the size limit of file uploads in ReactJS?

I have a reactJS frontend with a file upload component using NGINX to serve the frontend, that sends file data to my API and gets a response back. When I select a file larger than 1mb it never uploads the full data , only 1mb worth.

Example:

my file data state:

const [fileData, setFileData] = useState("");

This state returns a length of 1600202

I append the data for formData:

const formData = new FormData();
formData.append("file", fileData);
formData.append("name", fileName);

The size of the formData is 1600210

I send the data to the API:

  await axios({
      url: `${baseUrl}/test`,
      method: "POST",
      headers: {
        //"Content-Type": "application/json",
        Authorization: globalState.sessionToken,
      },
      responseType: "arraybuffer",
      data: formData,
    })

The size on the network tab shows 1MB sent, along with the response size being 1048612 and the ArrayBuffer size being 1048612.

I know on the API side I have increased the upload limit to 5MB, but clearly something on the frontend is cutting data off at 1MB before it even reaches the server.

Is there a configuration I should be setting to allow larger file sizes?

Upvotes: 0

Views: 2831

Answers (1)

Kushtra
Kushtra

Reputation: 76

Could you provide some more info, does backend throw any errors, do you use some kind of library for parsing files (multer, formidable...)? Frontend size limits are only there if you manually check file size or if you set axios body max size. This is more of a comment but since I can't comment yet because of reputation I am posting it as an answer, sorry.

Upvotes: 1

Related Questions