Uppy DropTarget with React

Question

How can I use the Uppy DropTarget plugin with React?

I'm trying to do some things like that. But doesn't work.

import React from 'react'
import { DragDrop, useUppy } from '@uppy/react'

const Dropzone: React.FC = () => {

const uppy = useUppy(() => {
    return new Uppy()
      .use(Tus, {
        endpoint: 'https://tusd.tusdemo.net/files/', // use your tus endpoint here
        retryDelays: [0, 1000, 3000, 5000],
      })
      .use(DropTarget, {
        target: '#dropzone',
      })
})

return (
    <>
      <div
        id="dropzone"
        data-id="dropzone-inner"
        className="flex items-center"
      >
      </div>
    </>
)}

enter image description here

Answer 1

The element you want to target for the DropTarget wont have been rendered when Uppy is instantiated. You will have to use the DropTarget plugin in a useEffect hook:

import React, { useEffect } from 'react';
import Uppy from '@uppy/core';
import { useUppy } from '@uppy/react';
import Tus from '@uppy/tus';
import DropTarget from '@uppy/drop-target';

const Dropzone: React.FC = () => {
  const uppy = useUppy(() => {
    return new Uppy().use(Tus, {
      endpoint: 'https://tusd.tusdemo.net/files/', // use your tus endpoint here
      retryDelays: [0, 1000, 3000, 5000],
    });
  });

  useEffect(() => {
    uppy.use(DropTarget, {
      target: '#dropzone',
    });
  }, []);

  return (
    <div
      id="dropzone"
      data-id="dropzone-inner"
      className="flex items-center"
    />
  );
};