TypeError: This stream has already been locked for exclusive reading by another reader

[mbkProgrammer]

I want to upload file after post created in database and then upload file in folder name is post.id but I get this error
TypeError: This stream has already been locked for exclusive reading by another reader

this is my source code

export const addPost = async (request: Request ) => {
  const formData = await request.formData()
  const searchTagStr: string = formData.get('searchTag');
  const searchTag = searchTagStr.split(',');
  const post = await prisma.post.create({
    data: {
      title: formData.get('title'),
      description: formData.get('description'),
      content: formData.get('content'),
      author: formData.get('author'),
      keyword: formData.get('keyword'),
      searchTag: searchTag,
    },
  });

  const s3UploaderHandler: UploadHandler = async ({ filename, data, contentType }) => {
    const customFileName = 'blog/'+ post.id + '/' + filename;
    return await uploadStreamToS3(data, customFileName, contentType);
  };

  const fileData = await unstable_parseMultipartFormData(request, s3UploaderHandler);

  const fileName = fileData.get('assets') as File;
  const titleImage = fileData.get('titleImage') as File;
  const updatedPost = prisma.post.update({
    where: { id: post.id },
    data: { image: `https://pertadex-storage.storage.iran.liara.space/${titleImage}` },
  });

  return updatedPost;
};

[sergiodxa]

You can only read the body of a request once, and you're calling request.formData() and later using unstable_parseMultipartFormData which also reads the body.

I recommend you to just use unstable_parseMultipartFormData to get the FormData and the files and do the prisma.post.create after that.

Alternatively, you can do request.clone().formData() to clone the request first, but since it comes with files it may consume too much memory.

[kiliman]

You typically only want to process the body once, especially with file uploads. You should compose your upload handler to include unstable_createMemoryUploadHandler. This will process the non-file values you can access with formData.get().

export const action = async ({
  request,
}: ActionFunctionArgs) => {
  const uploadHandler = unstable_composeUploadHandlers(
    s3UploadHandler,
    // parse everything else into memory
    unstable_createMemoryUploadHandler()
  );
  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );

  const file = formData.get("assets") as File;
  const title = formData.get("title");
  // etc
};

[sergiodxa]

I think it will be nice if by default calling request.formData() used the memory upload handler to keep all files as in-memory, give you the option to use parseMultipartFormData with another upload handler if you want to reduce the memory consumption of your app.

But as Remix stop polyfilling the Fetch API (which includes the Request and Response objects), how this work will depend on each platform, I'm not sure of calling request.formData() on a multipart/form-data request in Node or Cloudflare gives you the files in-memory or just ignore them.

[jdaly13]

But this doesn't work for example if you want to parse the formData before you upload to S3 or any cloud storage - for example you have a formdata field that can tell you which bucket upload to - I will try using clone but this whole process is overly cumbersome and while I love remix file uploading is awful on this platform, the documentation is not good and I can't find what these unstable functions do or return anywhere in the documentation. The fact that I need to clone the formdata seems backwards - also it's difficult to figure out how to return the actual file form a customer upload handler - if I try to return anything that's not a string I'm getting '[Object object]'

[jaschaio]

I got this exact same issue, how do I get a part of the form data that I require before uploading it to the correct place in s3 without duplicating the request in memory.

[kiliman]

You can include the non-file parts in search params. This way you can read them without processing the form data. Your <Form action> would look something like: /upload?bucket=my-bucket

const url = new URL(request.url)
const bucket = url.searchParams.get('bucket')

const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );