[Bug]: MultipartFormData

[kikiondo117]

Which Remix packages are impacted?

• @remix-run/node

What version of Remix are you using?

1.1.3

What version of Node are you using? Minimum supported version is 14.

16.13.1

Steps to Reproduce

1. Import the next methods from remix or @remix-run/node.

• unstable_parseMultipartFormData
• unstable_createFileUploadHandler

2. Use those methods into ActionFunction to work with a form multipart

  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );

3. Watch the error
   

Browser Console:

🆘 Note: The documentation mentions a function called parseMultipartFormData but to be used you need to use the alias unstable_parseMultipartFormData. The documentation needs to be updated -

Documentation Link: (https://remix.run/docs/en/v1/api/remix#parsemultipartformdata-node)

Expected Behavior

Control the values as the documentation mentions:

let avatarUrl = formData.get("avatar");

...

Actual Behavior

Errors when you use the methods.

Browser Console:

[ccssmnn]

Possibly, the same underlying bug as in #669

Can you try importing this to entry.server.tsx first, and then import it from there into the routes?

[stropitek]

I ran into the same issue. The error is triggered by importing (and using) unstable_createFileUploadHandler.

Can you try importing this to entry.server.tsx first, and then import it from there into the routes?

I tried this and the issue remains

[DavideCarvalho]

Not only that, but if you try to make your own handler, the stream just gets stuck.

Below is a simple code I did. Sorry, couldn't reproduce on codesandbox, looks like the action is never called on codesandbox.

In this code, the log "after for...of" never gets called.

edit: I got the code from this video: https://www.youtube.com/watch?v=ySQcGc9NICo

import { Form } from "@remix-run/react";
import type { ActionFunction } from "remix";
import { UploadHandler } from "@remix-run/node/formData";
import { parseMultipartFormData } from "@remix-run/node/parseMultipartFormData";

const uploadHandler: UploadHandler = async ({ name, stream, filename }) => {
  try {
    if (name !== "documents") {
      stream.resume();
      return;
    }

    console.log("before for...of", name, filename);
    const chunks = [];
    for await (const chunk of stream) {
      console.log("inside for...of");
      chunks.push(chunk);
    }
    console.log("after for...of");
    const buffer = Buffer.concat(chunks);

    return "it worked";
  } catch (e) {
    console.log(e);
    return "it did not worked";
  }
};

export const action: ActionFunction = async ({ request }) => {
  console.log("im at the action");
  const body = await parseMultipartFormData(request, uploadHandler);

  console.log("body", body);
};

export default function Index() {
  return (
    <div className="remix__page">
      <Form method="post" encType="multipart/form-data">
        <input name="documents" type="file" />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
}

[bsanders343]

I'm having this issue as well. I would attach screenshots but what's already posted is exactly the same thing I'm seeing. Please let me know what other info I can provide to assist with investigating further. Thanks!

[josuevalrob]

any update here? is this related? #1628 https://github.com/remix-run/remix/issues/1620

[jacob-ebey]

#1766

[jacob-ebey]

#1764

[edmbn]

Hello everyone! I had the same issue only when importing it from 'remix' inside a resource route. When I was on a route that exported template this error never showed up. To solve the problem on the resource route I import what I need from remix (ActionFunction, redirect) from 'remix' and import { unstable_parseMultipartFormData as parseMultipartFormData } from '@remix-run/node' . Hopefully it helps meanwhile.