[form-data-parser] maxFileSize crash my route/server/fetcher

[guelosuperstart]

Hello,

I tried adding maxFileSize, but when the uploaded file exceeds the defined limit, the fetcher stops, and I’m unable to capture any error response.

I’ve implemented a catch block with if (error instanceof MaxFileSizeExceededError), which seems to be correct, but I’m not getting any return or feedback from the fetcher when this happens.

When the file size is below the maxFileSize, everything works perfectly.

Do you have any advice on how I can properly catch and handle the error when the file is too large?

Thanks!

const ImageButton = ({ editor }: { editor: Editor | null }) => {
  const fetcher = useFetcher();
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if ('idle' === fetcher.state && fetcher.data) {
      console.log(fetcher.data);
    }
  }, [fetcher.state, fetcher.data, editor]);

  if (!editor) {
    return null;
  }

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      const formData = new FormData();
      formData.append(emailImageFieldName, files[0]);
      fetcher
        .submit(formData, { method: 'post', action: appPaths.image.upload, encType: 'multipart/form-data' })
        .finally(() => event.target.value = '');
    }
  };

  return (
    <>
      {JSON.stringify(fetcher)}
      <span className="sr-only">Insert image</span>
      <ToolbarButton onClick={() => inputRef.current?.click()} isActive={editor.isActive('image')} icon={PhotoIcon} label="Insert image" />
      <input type="file" name={emailImageFieldName} accept="image/*" ref={inputRef} onChange={handleFileChange} />
    </>
  );
};

import type { Route } from './+types/upload.image._index.route';
import { type FileUpload, parseFormData } from '@mjackson/form-data-parser';
import { createStorageKey, fileStorage } from '~/routes/upload/email-storage.server';
import { appPaths } from '~/core/appPaths';
import { emailImageFieldName } from './upload.type';
import { MaxFileSizeExceededError } from '@mjackson/multipart-parser';

let storageKey: string;

async function uploadHandler(fileUpload: FileUpload) {
  if (emailImageFieldName === fileUpload.fieldName && fileUpload.type.startsWith('image/')) {
    storageKey = createStorageKey();

    await fileStorage.set(storageKey, fileUpload);

    return await fileStorage.get(storageKey);
  }
}

export async function action({ request }: Route.ActionArgs) {
  try {
    const formData = await parseFormData(request, { maxFileSize: 1000000 }, uploadHandler);
    console.log(formData);
    const file = formData.get(emailImageFieldName);

    if (file instanceof File) {
      return { name: file.name, src: `${appPaths.image.email(storageKey)}` };
    }

  } catch (error: any) {
    if (error instanceof MaxFileSizeExceededError) {
      return { success: false, message: error.message };
    }
  }

  return null;
}

[s-abstract]

Facing the same issue. What I've noticed is if the threshold is in the last chunk it works, if the file isn't read fully and already exceeds the limit - it doesn't work. My assumption that something is wrong with the file reading abortion that makes the request hanging.

[mphasize]

I can confirm the same issue. A console.error statement inside the catch block is executed, but a return new Response(...) or a return data(...) does not have the desired effect. (DevTools still shows the request as pending.)

I'm on Remix.run 2.16.8 and in the process of upgrading to React Router 7.

[mphasize]

Small update: The problem persists for me also after the upgrade to React Router 7.6.3.

[nicohaenggi]

Facing the same issue, I've done some debugging, and it seems like the underlying issue has something to do with how react-router handles unconsumed streams. One can replicate the same issue with the following route (without even using form-data-parser). Uncommenting the const form = await request.formData(); "fixes" the problem.

import { Form } from "react-router";
import type { Route } from "./+types/route";

export async function loader() {
  return {};
}

export async function action({ request }: Route.ActionArgs) {
  // const form = await request.formData();
  return {};
}

export default function Route() {
  return (
    <Form method="post" encType="multipart/form-data">
      <input type="file" name="file" />
      <input type="text" name="text" />
      <button>Submit</button>
    </Form>
  );
}

The issue seems to lie somewhere in the createReadableStreamFromReadable implementation in https://github.com/remix-run/react-router/blob/61e86dae9c2f591a134e5739473de7004be00dc3/packages/react-router-node/stream.ts#L66.

[s-abstract]

It could be related to Undici, I believe it's used under the hood, it's required to consume streams even if they are not used by their documentation

[mphasize]

Did anyone already test if this PR solves the issue? #74

[mjackson]

This repo has moved to the v3 branch on remix-run/remix. I would migrate the issue, but GitHub doesn't give me an easy way to do that across orgs.

I'm sorry I didn't get around to addressing this, but if you'd like to continue the conversation please feel free to re-open over there. Thanks! 🙏