(Filemanager) Requesting data after a rename operation

damunro

I am trying to implement a file manager and it seems mostly intuitive. I have a custom api for basic CRUD on my files, including renaming. When I trigger a rename, it seems to work, but when I refetch my file data, my app crashes and I get a type error:

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at index.js:1:5945
    at Array.filter (<anonymous>)
    at k (index.js:1:5933)
    at Object.exec (index.js:1:9130)
    at T._execNext (index.js:1:4894)
    at T._triggerUpdates (index.js:1:4769)
    at T.setState (index.js:1:4562)
    at T.init (index.js:1:4134)
    at U.init (index.js:1:13210)
    at Filemanager.jsx:116:17

To rename a file, I am intercepting the "rename-file" event in the api and sending a request to my backend, which returns a successful result. Then I re-request the data by clicking the spinner button. To do that I intercept the "request-data" event and trigger an api call, which replaces the data I feed into my Filemanager component.

I'm wondering if other people have ran into this issue or if there are methods for debugging this issue.

tasha

Hi damunro,

Based on the error description the error Uncaught TypeError: Cannot read properties of undefined (reading 'type')indicates that the data array contains an undefined element, and the code is trying to access the type property on it.
So please ensure if API data is a clean array of objects (the array might include empty elements) or if the API response structure is correct.
Also could you privide API response structure after refetching the data so that I could understand the problem better?

damunro

I am still prototyping, so my names will likely change but this is the response I get from my API (as copied from my swagger docs)

[
  {
    "id": 0,
    "upload": "http:/url/to/file",
    "file_name": "string.pdf",
    "svar_id": "/string.pdf"
  }
]

although I don't put the api response directly into the file manager, I map over my list of files and parse out the svar_id field and add set the type to be "file" because I am not handling folders yet (still very much prototyping)

  const fileData: IEntity[] = files.map((file) => ({
    id: file.svar_id,
    type: "file",
  }));

and then I pass it into the filemanager component along with my data


    <Willow>
      <Filemanager init={init} data={fileData} menuOptions={menuOptions} />
    </Willow>

tasha

Hi,
You can update the data on the server after renaming the file (rename-file action), and after intercepting the request-data action, the files should be updated by default.

In the request-data action, you can fetch new data from the server. And then, parse the new data using the provide-data action.
Additionally, please make sure that the file ID matches the path to the file. Because inconsistency in the file path can lead to such errors.

Here's an approximate example of how to implement this: https://stackblitz.com/edit/vitejs-vite-rbm9mxhz?file=src%2FFilemanagerComp.jsx