Set meta based on drop target event

[tobiasps]

This pull request extends the DropTarget plugin to allow for manipulating the meta fields of the dropped file based on the DragEvent. As an example, this allows using DropTarget to enable uploads to specific folders in a UI by using the DragEvent to determine the parents of the event.

The pull request contains the following changes:

• Added new option activeClass for customizing the class added to target on dragover.
• Added new option setMeta to enable setting specific meta fields depending on the drop event. This enables using one DropTarget with body as target with the meta fields being set depending on which DOM element the files were dropped.
• Added droptarget:dragover, droptarget:dragleave, and droptarget:drop events to allow for maniulating classes on the current element.

[aduh95]

Thanks for sending this. Would you be able to write tests for these options?

[aduh95]

Any reason not to use the shorter form as before?

Suggested change

	const descriptors = files.map((file) => {
	return {
	const descriptors = files.map((file) => ({

[tobiasps]

No, I'll fix this.

[Murderlon]

I have a few questions/concerns about these changes.

• Why isn't uppy.setFileMeta enough for your use case?
• Do we need activeClass? If you want custom styles, can't you target the existing class and override it?

[tobiasps]

I have a few questions/concerns about these changes.

• Why isn't uppy.setFileMeta enough for your use case?

What I needed was a way to set the file meta depending on which dom node the file was dropped. To do this I needed to get access to the drag event object which is why I implemented the setMeta hook, which includes the drag event.
My use case is uploading to a file tree where each folder is a possible upload point. With this change to DropTarget, I can have one global DropTarget instance and use the drag event to determine where the file was dropped.

We have a small screencast of the functionality: https://share.iogates.com/show/511557/343338-34ys4uatjh0xhvhc

• Do we need activeClass? If you want custom styles, can't you target the existing class and override it?

Our web app is old and we are using uppy in the traditional way, as a global library. It was easier for us to change the CSS changes by effectively disabling the default behaviour by changing the active class name.

[aduh95]

I think you could indeed achieve what you are trying to do by subclassing the DropTarget class plugin:

class MyDropTarget extends DropTarget {
  install(...args) {
    const { addFiles, handleDrop } = this;
    this.addFiles = (files) => {
      addFiles(files);
      return files;
    };
    this.handleDrop = (event) =>
      handleDrop(event).then((files) => {
        /* here you have access to `files`, `event`, and `uppy.setFileMeta` */
      });
    return super.install(...args);
  }
}

uppy.use(MyDropTarget, {
  target: document.body,
});

For the activeClass hack, I don't have an opinion, it's also possible to hack you way around using a similar trick.

[Murderlon]

@tobiasps thanks for clarifying. I'm not happy with adding setMeta in this plugin while we already have setMeta (and setFileMeta) in @uppy/core.

Could we instead only expose the events, like #2914, but pass the file ID as an additional parameter? Then you should be able to use uppy.setFileMeta in your custom event handler.

[Murderlon]

Superseded by #3238

[tobiasps]

Superseded by #3238

Great! Thanks for your work @Murderlon