file upload not working on 2.5.0 remix

[tenkus47]

Reproduction

i upgraded remix to the latest version which is 2.5.0 now when i try to upload a file and get it in actions. the below error message is coming. ReferenceError: File is not defined at (D:\work\monlam_ai_tools\node_modules\@remix-run\node\dist\upload\fileUploadHandler.js:143:20)

System Info

File

Used Package Manager

npm

Expected Behavior

can u help

Actual Behavior

file should get uploaded

[brophdawg11]

Can you provide a reproduction of the issue?

[binajmen]

I have a similar issue with unstable_createMemoryUploadHandler:

ReferenceError: File is not defined
    at /Users/binajmen/.../node_modules/@remix-run/server-runtime/dist/upload/memoryUploadHandler.js:44:7

I also tried with unstable_createFileUploadHandler but have the same issue:

ReferenceError: File is not defined
    at <instance_members_initializer> (/Users/binajmen/.../node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:143:20)

@brophdawg11 I implemented a file upload in a new remix project and was not able to reproduce the issue :(

This is the action with the issue:

export async function action({ request }: ActionFunctionArgs) {
  console.log("1");
  const uploadHandler = unstable_createFileUploadHandler({
    maxPartSize: 3_000_000,
  });
  console.log("2");
  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler,
  );
  console.log("3");
  const file = formData.get("file") as File;
  console.log("4");

And the log:

GET /admin/materials/import 200 - - 64.483 ms
1
2
POST /admin/materials/import?_data=routes%2Fadmin%2B%2Fmaterials%2B%2Fimport 500 - - 119.850 ms

It seems unstable_parseMultipartFormData doesn't like what he gets.

[binajmen]

Hi @brophdawg11,

I reduced my project to a minimum reproduction: https://github.com/binajmen/bug-remix-file-upload

[tenkus47]

sorry i couldnt reproduce the error because if I make a new app and try it it works . but I get the same error like @binajmen on old project even after upgrading remix to latest. any updates? on the issue? thank you

[kiliman]

Make sure that ALL your Remix packages are the same version.

@brophdawg11 created a script to properly update Remix.

npx upgrade-remix

https://npmjs.com/package/upgrade-remix

[brophdawg11]

@binajmen It looks like your project isn't calling installGlobals() to install the File polyfill. Adding that to the top of your express server fixes the issue 👍

@tenkus47 I believe this is likely your issue as well - if you are using a custom server please ensure you're installing the polyfills in your server.js/ts file

[imrostom]

I also face this type issue.

const uploadHandler = composeUploadHandlers( createFileUploadHandler({ directory: "public/uploads", maxPartSize: 300000000, }), createMemoryUploadHandler(), ); const formData = await parseMultipartFormData(request, uploadHandler);

My remix version is 2.8.1 and image upload successfully in upload folder after that i face same issue.

[brophdawg11]

Could you provide a reproduction?

[k1sul1]

No repro from me either, but chiming in that I'm also suddenly seeing an influx of this error. I've used to getting it in local development every now and then but I've not seen it happen in a hosted environment (Vercel).

I tried submitting a form without a file selected for upload and received File is not defined about 15 times in a row. I have a feeling that this somehow relates to the dev server.

For what it's worth, we're on 2.8.1 and this is what our upload handler looks like>:

const uploadHandler: UploadHandler = unstable_composeUploadHandlers(
  createS3UploadHandler('img'),
  unstable_createMemoryUploadHandler()
);

const formData = await unstable_parseMultipartFormData(
  request,
  uploadHandler
);

in which createS3UploadHandler streams the file to S3 and returns us some data in the form of a JSON blob.

export const createS3UploadHandler: (inputName: string) => UploadHandler =
  (inputName: string) =>
  async ({ name, filename, data }) => {
    if (name !== inputName || !filename) {
      return undefined
    }

    // ...

    const newFilename = uuid() + "." + fileType || "jpg"
    const upload = await uploadStreamToS3(data, newFilename)

    return JSON.stringify(upload)
  }

[imrostom]

Could you provide a reproduction?

please check this file, https://github.com/imrostom/shopify-image-upload/blob/main/app/routes/app.upload.jsx

i think it's shopify.server releted problem .

[brophdawg11]

If someone can provide a minimal reproduction of the issue we'd be happy to take a look

[imrostom]

If someone can provide a minimal reproduction of the issue we'd be happy to take a look

Issue solved after adding installGlobals(); in shopify.server.js