How to get file system path of a directory in useDrop?

[xyc]

I'm in the process of migrating from react-dnd to react-aria. Generally everything works great, but one thing that's in react-dnd that's not in react-aria is the path of the directory of the item dropped.

It looks like DirectoryDropItem only supports name and getEntries methods. Does anyone know a workaround to this?

[snowystinger]

Can you provide an example of this in react-dnd? To the best of my knowledge it's not possible, but possibly I'm overlooking something.

[xyc]

Hey @snowystinger , thanks for following up. Sorry about the delay in reply. Found out that file path is an extension of Electron / Webview2.

react-dnd exposes the underlying File objects. Do you think it's possible for useDrop to expose the original File object or drop event as an escape hatch?

[snowystinger]

I'll bring this up with the team

[snowystinger]

For an individual file you should be able to use getFile on the dropped item.
For directories, everything inside the directory has a relative path.

As for the path property, it looks like that has been deprecated in Electron https://www.electronjs.org/docs/latest/api/file-object
I'd see if you can use the webUtils API they mention instead. It looks like it should just take the File Object, so hopefully that will work.

[xyc]

Thanks for the pointers @snowystinger . I might be missing something obvious here, but I didn't see how I can get relative paths when iterating over item.getEntries.

I think File objects are good enough for this use case & other potential use cases for directories. I could retrieve the file objects from getEntries though, but without relative paths it's hard to infer the directory path.

For the directory items, would it make sense to add a getFile method in createDirectoryItem, similar to File item?

react-spectrum/packages/@react-aria/dnd/src/utils.ts

Line 233 in b46d23b

items.push(createDirectoryItem(entry));

Something like the following code, where getAsFile retrieves the file object from data transfer item. getFile naming might be a bit confusing since it's a directory, not sure if there's a better alternative.

items.push({
    kind: 'directory',
    name: entry.name,
    getFile: () => item.getAsFile(),
    getEntries: () => getEntries(entry)
  })