How to "properly" get file size when using unstable_composeUploadHandlers

[yankustefan]

Is it possible to check the file size when using unstable_composeUploadHandlers?

UploadHandlerPart returns {name: string, filename?: string, contentType: string, data: AsyncIterable<Uint8Array>

Currently I am doing it like this:

const fileSizeCounter = async (
  data: AsyncIterable<Uint8Array>,
  abortAtBytes?: number
): Promise<number> => {
  let bytes = 0;
  for await (const x of data) {
    bytes += x.length;
    // abort if max bytes is reached (1MB = 1_048_576)
    if (abortAtBytes && bytes > abortAtBytes) {
      break;
    }
  }
  return bytes;
};

const myUploadHandler = unstable_composeUploadHandlers(
  // our custom upload handler
  async (args) => {
    if (args.name === "add_file") {
      const fileSize = await fileSizeCounter(args.data, 1_048_576);
      if (fileSize > 1_048_576) {
           return 'file-to-big';
      } else {
            return uploadImageToMyServer(args);
      }
    }
    return undefined;
  },
  // use to memory for other fields
  unstable_createMemoryUploadHandler()
);

It works, but is this the way to do it?

[kiliman]

That's pretty much how the fileUploadHandler works:

remix/packages/remix-node/upload/fileUploadHandler.ts

Lines 136 to 143 in f71e915

	for await (let chunk of data) {
	size += chunk.byteLength;
	if (size > maxPartSize) {
	deleteFile = true;
	throw new MaxPartSizeExceededError(name, maxPartSize);
	}
	writeFileStream.write(chunk);
	}

[yankustefan]

Thank you for your feedback!

[Download]

Having processed uploads as an assignment a long time ago, I vaguely remember that there is also the Content-Length header that exposes the size that you can use to check the size without having to run through all the data first.... It is just a header so can be spoofed of course so you still need to check as you are processing but all browsers set this header correctly so it can save some processing time if you check it first.

UploadHandlerPart returns {name: string, filename?: string, contentType: string, data: AsyncIterable

It might be worthwhile to add a contentLength parameter here that exposes the content of the Content-Length header, in the same way as the contentType parameter, to allow for this...

[yankustefan]

Thank you for your feedback @Download :)

Yes, I think so.
Currently I do a regular const fileBlob = formData.get(FIELD_NAME) and get a Blob, which I can check with fileBlob.size

Yes, exposing a contentLength parameter would be really helpful to pre-check the file size. It would enable to abort processing seemingly large files early.
One can then still implement a strict check by running it through the AsyncIterable as mentioned above.

[machour]

Moving this to discussions where all new features gets discussed as per our dev guidelines