Allow unique id for React DragDrop component

[zachwinnie]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

The React DragDrop allows consumers to pass in an id prop, but it doesn't actually resolve to the Uppy plugin id. The plugins id is always react:DragDrop. This also prevents consumers from having more than one instance of DragDrop on screen at once.

import { DragDrop } from '@uppy/react';
<DragDrop
  id="my-unique-id" // doesn't work and is always `react:DragDrop`
  uppy={uppy}
/>

This should be a very straightforward fix in packages/@uppy/react/src/DragDrop.ts (I'd push a branch and open a PR but I don't have permission to push code to this repo):

installPlugin(): void {
  const { uppy, locale, inputName, width, height, note, id } = this.props
  const options = {
    id: id || 'react:DragDrop', // this is the fix
    locale,
    inputName,
    width,
    height,
    note,
    target: this.container,
  }

  uppy.use(DragDropPlugin, options)

  this.plugin = uppy.getPlugin(options.id)!
}

Expected behavior

Providing a unique id for React DragDrop component should render unique plugin id. This will allow for multiple versions of DragDrop to be render on screen at once.

Actual behavior

The plugins id is always react:DragDrop even when a unique string for id prop as described above.

[Murderlon]

I will take a look and also remove the react: prefix, it's only confusing imho.

[Murderlon]

Fixed in #5228