-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Open
Labels
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:
react-spectrum/packages/@react-aria/dnd/src/useDrop.ts
Lines 253 to 267 in 3691c7f
if (typeof options.onDrop === 'function') { | |
let dropOperation = DROP_EFFECT_TO_DROP_OPERATION[state.dropEffect]; | |
let items = readFromDataTransfer(e.dataTransfer); | |
let rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); | |
let event: DropEvent = { | |
type: 'drop', | |
x: e.clientX - rect.x, | |
y: e.clientY - rect.y, | |
items, | |
dropOperation | |
}; | |
options.onDrop(event); | |
} |
🤔 Expected Behavior?
I wish I could just do this:
<DropZone
onDrop={(event) => {
ok(inputRef.current);
inputRef.current.files = event.dataTransfer.files;
}}
>
<FileTrigger
ref={inputRef}
allowsMultiple
>
<Button>Select files</Button>
</FileTrigger>
<span>Drop files here</span>
</DropZone>
😯 Current Behavior
Currently I have to do this:
<DropZone
onDrop={async (event) => {
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;
}}
>
<FileTrigger
ref={inputRef}
allowsMultiple
>
<Button>Select files</Button>
</FileTrigger>
<span>Drop files here</span>
</DropZone>
schickling
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
LFDanLu commentedon Aug 6, 2024
@devongovett I don't recall if we had a reason behind discarding the original
dataTransfer
other than the various inconsistencies that are handled in readFromDataTransfer.snowystinger commentedon Aug 7, 2024
Possibly related, our decision to split our current FileTrigger away from forms, #5751
alecmev commentedon Aug 7, 2024
FileTrigger
is just an example, it can be a raw<input type="file" />
.devongovett commentedon Aug 7, 2024
The problem is that there isn't always a DataTransfer available for all types of drops. For example, dnd using the keyboard is custom and does not use native dnd.
alecmev commentedon Aug 8, 2024
Okay, I understand. I guess it doesn't make sense to expose the whole
dataTransfer
, maybe justdataTransfer.files
would be acceptable? Looks likeonKeyboardDrop
can only producetext
items:react-spectrum/packages/@react-aria/dnd/src/DragManager.ts
Lines 553 to 568 in 3691c7f
So it doesn't even need to be synthesized there, just omit
files
. Thoughts?