sending same post requests multiple times but just last one request has formdata in it #6525

codenoobforreal · 2024-08-04T09:07:50Z

codenoobforreal
Aug 4, 2024

I have a newly created vite project with react and ts setup.

export default function NativeFileUpload() {
  function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
    if (e.target.files) {
      const file = e.target.files.item(0) as File;
      const chunks = createFileChunks(file, CHUNK_SIZE);
      uploadAllChunks(chunks);
    }
  }

  return (
    <div>
      <label htmlFor="files">choose a file</label>
      <input
        type="file"
        id="files"
        name="files"
        accept={ALLOW_MIMETYPES.join(",")}
        multiple
        onChange={handleFileChange}
      />
    </div>
  );
}

function uploadAllChunks(chunks: Blob[]) {
  let chunkReqList = [];
  for (let i = 0; i < chunks.length; i++) {
    const formData = new FormData();
    const chunk = chunks[i];
    formData.append("chunkFile", chunk);
    chunkReqList.push(uploadFileChunkReq(formData));
  }
  return chunkReqList;
}

function uploadFileChunkReq(formData: FormData) {
  return axios.post("http://localhost:3000/uploadFile/fileChunk", formData);
}

the backend express server is quite simple.defined the route and send back 200 without doing anything.
the file is about 82mb.chunk size constant is 32mb.so it's 3 chunks total.

So what i got is:
the first and second request does not have payload
the last one is carring formdata payload

I have done so many searches about axios and formdata.Also finding the similar issues and discussions.
But still can't figure out what is wrong with this code.

jasonsaayman · 2026-06-11T17:51:36Z

jasonsaayman
Jun 11, 2026
Maintainer

If the server responds before it reads the request body, large uploads can be cut short. Express also does not parse multipart/form-data by default, so req.body will be empty unless you use something like multer or busboy.

Use a multipart parser and send the response only after the file chunk has been received.

Example with multer:

import express from 'express';
import multer from 'multer';

const app = express();
const upload = multer({ storage: multer.memoryStorage() });

app.post('/uploadFile/fileChunk', upload.single('chunkFile'), (req, res) => {
  console.log('chunk size:', req.file?.size);
  console.log('fields:', req.body);

  res.sendStatus(200);
});

app.listen(3000);

On the client, I would also await the requests so errors are not ignored:

async function uploadAllChunks(file: File, chunks: Blob[]) {
  await Promise.all(
    chunks.map((chunk, index) => {
      const formData = new FormData();

      formData.append('chunkFile', chunk, `${file.name}.part-${index}`);
      formData.append('chunkIndex', String(index));
      formData.append('totalChunks', String(chunks.length));
      formData.append('fileName', file.name);

      return axios.post('http://localhost:3000/uploadFile/fileChunk', formData);
    })
  );
}

And call it like this:

async function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
  const file = e.target.files?.item(0);

  if (!file) {
    return;
  }

  const chunks = createFileChunks(file, CHUNK_SIZE);

  await uploadAllChunks(file, chunks);
}

If your backend cannot handle several large chunk uploads at the same time, send them sequentially instead:

async function uploadAllChunks(file: File, chunks: Blob[]) {
  for (let index = 0; index < chunks.length; index++) {
    const formData = new FormData();

    formData.append('chunkFile', chunks[index], `${file.name}.part-${index}`);
    formData.append('chunkIndex', String(index));
    formData.append('totalChunks', String(chunks.length));
    formData.append('fileName', file.name);

    await axios.post('http://localhost:3000/uploadFile/fileChunk', formData);
  }
}

Also, do not manually set the Content-Type header for browser FormData. Let the browser set it, because it needs to include the multipart boundary.

So the short version is: Axios is probably sending the data, but your Express route needs to actually consume/parse the multipart body before returning 200.

0 replies

Navigation Menu

Repository navigation

sending same post requests multiple times but just last one request has formdata in it #6525

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

sending same post requests multiple times but just last one request has formdata in it #6525

Uh oh!

Uh oh!

codenoobforreal Aug 4, 2024

Replies: 1 comment

Uh oh!

jasonsaayman Jun 11, 2026 Maintainer

codenoobforreal
Aug 4, 2024

jasonsaayman
Jun 11, 2026
Maintainer