What is the correct way to get current uppy state in React 18?

Uppy
1

I’m using React 18 (remix) and "@uppy/core": "^2.3.4",.

I wanted a simpler custom Uploader UI for my use case, so I wanted to access current files in the state(meaning with their upload progress data when changes occur) but both uppy.getState() and uppy.getFiles() returned nothing.

I have used "@uppy/store-default": "^3.0.2" by initializing uppy store with new DefaultStore(), yet not changes. Must I use Redux? I wanted to use the defaultStore to test before finalizing implementation.

I must be missing something. Pointing me to docs or any clue will be much appreciated.

Thank you.

2

Hi, I haven’t seen this before. Uppy needs to be client-side rendered so something might be wrong if you’re using Remix and render server-side. A reproducible example would help. We have a template on codesandbox, although not in Remix.

3

I know this is a bit old. But I’m porting a NextJS 12 app to 13.

With the exact same code. Both getFiles and getState report an empty array.

However, if I listen to the event “files-added” and query getFiles, I see data. But outside of this, if I execute getFiles say from a button. It’s empty!

So something is going on here. I’m going to attempt to debug.

Oh and what’s worse, there’s no documentation about using an external store. https://uppy.io/docs/guides/custom-stores/ goes to a 404.

4

Make sure Uppy UI components are rendered on the client if you are using the new app router. Also check that you are initialising uppy outside of the component.

If you still have issues, create an issue with a reproducible example.

5

Thanks for the follow up, appreciate it!

To confirm, the uppy code is within a “use client” tree. So they are definitely clientside.

What I found worked. Is that I initialised uppy in a component and passed that to a sub component which was responsible for the events.

The upper component has state, which on mount would then load the sub component.

Now getFiles and getState are populated.

6

Unless you are rendering an arbitrary amount of uppy instances, I strongly recommend not initialising uppy inside a component. You will run into unexpected issues when during rerenders.

7

Can you please clarify what you mean by outside of a component. Perhaps our definitions are different?

When I mean component, I meant a react component.

Also I’m not using Uppy UI components. All I’m using is:

import useUppy from "@uppy/react/lib/useUppy.js";

Nothing else.

8

Please read the docs which will clarify things. useUppy has been deprecated for a long time. The hook will not work as expected as of React 18. Better to upgrade to latest Uppy packages and follow the docs.

9

Hi Merlijn,

Given that useUppy is deprecated, what would be the correct way to access Uppy state in a reactive way? As far as I looked I don’t see any good documentation on this.

For more context, I am also using React 18 and trying to build a custom UI to go with Uppy. More specifically, I want to delegate all the uploading logic to Uppy but render my own custom UI instead of using Dashboard.

So far the only way that I have found to work is to manage my own local state and update it based on events fired by Uppy. It works but it is tedious and essentially duplicating Uppy’s state so I was wondering if there is a way I could access Uppy state in reactive fashion.

10

Hi, this is a bit tricky indeed. Uppy was originally made many years ago when vanilla JS components were still the main thing. We then made framework wrappers to not rebuild the entire UI in each framework, which works fine in all frameworks except for React.

Long-term, we’re thinking of a way to improve this specifically for React. For now, some complexity may be involved on your side.

This is indeed what we ended up doing for the Transloadit website, which uses React. I know it’s not ideal, but it does the job for now.