ReferenceError: File is not defined

[Annastacia-dev]

I'm using the activestorage npm package in a NextJs app
I have imported the DirectUpload component import { DirectUpload } from 'activestorage';
Error emerges when this code to upload the file is hit

const uploadFile = (file: RcFile) => {
    const upload = new DirectUpload(
      file,
      `${api.defaults.baseURL}/rails/active_storage/direct_uploads`
    );
    upload.create((error: Error, blob: ActiveStorage.Blob) => {
      if (error) {
        console.error(error);
      } else {
        console.log(blob)
      }
    });
  };

Error stack:

Import trace for requested module:
./node_modules/activestorage/app/assets/javascripts/activestorage.js
./src/components/admin/forms/products/NewProduct.tsx
 ✓ Compiled in 1015ms (3194 modules)
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 ⨯ ReferenceError: File is not defined
    at /home/annastacia/webcafe/dawatele/web/node_modules/activestorage/app/assets/javascripts/activestorage.js:438:19

I have used this before in a Vite + ReactJS app recently and I don't encounter the same error

[Edouard-chin]

Ah it's because activestorage isn't intended to be used in a node.js environment. Node doesn't implement the File API.

This issue is similar #34586 and you should be able to find a workaround from other users.