Pass `dataTransfer` through in `onDrop`

[alecmev]

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>

[LFDanLu]

@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]

Possibly related, our decision to split our current FileTrigger away from forms, #5751

[alecmev]

FileTrigger is just an example, it can be a raw <input type="file" />.

[devongovett]

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]

Okay, I understand. I guess it doesn't make sense to expose the whole dataTransfer, maybe just dataTransfer.files would be acceptable? Looks like onKeyboardDrop can only produce text items:

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

Lines 553 to 568 in 3691c7f

	if (typeof this.currentDropTarget.onDrop === 'function') {
	let items: DropItem[] = this.dragTarget.items.map(item => ({
	kind: 'text',
	types: new Set(Object.keys(item)),
	getText: (type: string) => Promise.resolve(item[type])
	}));
	let rect = this.currentDropTarget.element.getBoundingClientRect();
	this.currentDropTarget.onDrop({
	type: 'drop',
	x: rect.left + (rect.width / 2),
	y: rect.top + (rect.height / 2),
	items,
	dropOperation: this.dropOperation
	}, item?.target);
	}

So it doesn't even need to be synthesized there, just omit files. Thoughts?