Uppy XHR-Upload mode with drag-and-drop?

Question

I am evaluating React upload frameworks and stumbled upon Uppy.

Looking at the docs, I can’t figure out if it is possible to use Uppy with Drag and Drop using XHR Upload mode?

Anyone has tried that? I am hoping to use an existing hapi backend.

Answer 1

It should be pretty simple to use with XHR Upload. There is currently no example for it, but I'm pretty sure that it is possible. Assuming that you are using a Functional Component rather than a class based one, here is some example code

import Uppy from '@uppy/core';
import XHRUpload = from '@uppy/xhr-upload';
import { DragDrop } from '@uppy/react';

const MyComponent = () => {
  const uppy = React.useMemo(() => {
    // Do all the configuration here
    return Uppy()
      .use(XHRUpload, {
        endpoint: 'your backend endpoint'
      })
  }, []);

  React.useEffect(() => {
    return () => uppy.close()
  }, [])

  // Other props are also needed, see https://uppy.io/docs/react/drag-drop/
  return <DragDrop uppy={uppy} />
}

That should work just fine. In general, most of these choices in various areas (ex. destination, providers, framework, etc), work well together, minus a few exceptions.

I hope this helped, let me know if this works or if there are any further issues

Answer 2

Yes, see other answer for example,
but here is why you should not:

• Uppy's XHRUpload does not support pause, resume or chunk to begin with.

• Which is intentional, since Uppy want's to encourage you to use TUS.

• Hence use Uppy's TUS mode, or instead use an entire other library, like DropZone-JS.