RequestContentLengthMismatchError when uploading file with read stream

[yonathan06]

I have this piece of code for uploading a file using a read stream

  const { size } = await fs.promises.stat(filePath);
  listeners.onFileSize({ size, filePath });

  const urlObj = new URL(url);
  const fileReadStream = fs.createReadStream(filePath);

  fileReadStream.on('data', () => {
    listeners.onProgress({ total: fileReadStream.bytesRead, filePath });
  });

  headers['Content-Length'] = size;
  headers['User-Agent'] = 'Electron/1.0';
  headers['Accept-Encoding'] = 'gzip, deflate, br';
  headers['Accept'] = '*/*';
  headers['Host'] = urlObj.host;

  const response = await request(url, {
    method: 'PUT',
    body: fileReadStream,
    headers,
  });

I get the following error RequestContentLengthMismatchError: Request body length does not match content-length header

I tried removing headers['Content-Length'] = size; header, but then the the content-length sent is by undici is 0

In the source code I see undici is using bodyLength(body) from lib/core/utils.js that looks for the stream length, but it is zero.

fileReadStream.on('data', ...) does emit, with the right byte length eventually, so bytes are sent when not setting the content-length header manually, but the header sent is 0 so the server get confused

what am I missing?

[ronag]

You are starting the stream prematurely by registering the data listener. Call pause after registering the listener.

[yonathan06]

Thanks! it worked :)

[jimmywarting]

kind of wish that FetchObserver (for a single fetch) was finalized.
Nobody is working on it 😞

Tracking the time the data is taken from the stream isn't the same as the data being transferred over the network.

One possible solution we could have (to even come close to having something like a progress listener) is to impl. background fetch in order to track progress.
but it's a hole undertaking implementing something as big as background fetch manager. I also feel like it is somewhat related to the cache api (of how it matches requests).
The Cache api is more or less how the background fetch stores request / responses.

so if we want to have background fetch then we maybe want to implement the cache api first?