adobe / adobe/react-spectrum

Pass `dataTransfer` through in `onDrop`

Open
#6,835 5 comments 1 reaction 0 assignees View on GitHub
has workaround
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

I use DropZone in a form, and would like to have an easy way to set the associated input's `files` property. Currently I have to construct my own `FileList`, but the original `dataTransfer` is right there, just discarded:

https://github.com/adobe/react-spectrum/blob/3691c7fc9c4f4138e268704bb776694018f04259/packages/%40react-aria/dnd/src/useDrop.ts#L253-L267

### 🤔 Expected Behavior?

I wish I could just do this:

```ts
{
ok(inputRef.current);
inputRef.current.files = event.dataTransfer.files;
}}
>

Select files

Drop files here

```

### 😯 Current Behavior

Currently I have to do this:

```ts
{
const dataTransfer = new DataTransfer();
const files = await Promise.all(
event.items
.filter((x) => x.kind === 'file')
.map(async (x) => x.getFile()),
);
for (const file of files) dataTransfer.items.add(file);
ok(inputRef.current);
inputRef.current.files = dataTransfer.files;
}}
>

Select files

Drop files here

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.