TypeError: Could not parse content as FormData.

What version of Remix are you using?

1.5.1

Steps to Reproduce

1.5.1 introduces breaking change on how unstable_parseMultipartFormData works.

https://github.com/remix-run/remix/commit/25b4c83b10c5bc4d84ea81407e7de1a0e4f43df4#diff-70aea120272f0e47c3bc1e93fd83fadb9997e605479b1f3cc0afbafc58efe563R42

Before 1.5.1 unstable_parseMultipartFormData wouldn’t care if your form had enctype="multipart/form-data", but now there is a check that throws TypeError: Could not parse content as FormData..

To fix it make sure you include the enctype in your forms.

---

Also you need to update your uploadHandler to include memory upload handler. Something like this:

export const uploadHandler = unstable_composeUploadHandlers(
  unstable_createFileUploadHandler({
    avoidFileConflicts: true,
    directory: '/tmp',
    file: ({filename}) => filename,
    maxPartSize: 5_000_000,
  }),
  unstable_createMemoryUploadHandler(),
);

---

I know these are unstable APIs, but if the team could point out the breaking changes next time in the release notes that would be great.

[ScottAgirs]

To fix it make sure you include the enctype in your forms.

Thanks for the tip, just wanted to mention for future reference that it’s encType="multipart/form-data" with capital T in React

<form
  action={`/new`}
  method="POST"
  encType="multipart/form-data"
>

Thanks, @CanRau, this solved issue for me. Perhaps there’s some way to add this to Remix linter?

[ivosabev]

@LukasCornille, look at my comment on composing the handlers. The uploadHandler only handles the file part of the formData, you need the memoryUploadHandler to parse the POST fields.

export const uploadHandler = unstable_composeUploadHandlers(
  unstable_createFileUploadHandler({
    avoidFileConflicts: true,
    directory: '/tmp',
    file: ({filename}) => filename,
    maxPartSize: 5_000_000,
  }),
  unstable_createMemoryUploadHandler(),
);