I can't apply drag-drop to an existing html div

Uppy
1

I keep getting this error

Error in created hook: "Error: Invalid target option given to FileInput.If you meant to target an HTML element, please make sure that the element exists

I’m trying to integrate the drag and drop with an existing div. I’m doing this rather than using a dragDrop component because I want to use a custom design. For further context, I’m using Vue. However, even if you’re not familiar with Vue, a lot of the base setup is more or less the same.

my div looks like this

  <div id="file-select-box" >
       upload here
  </div

my import statement in the script looks like this

import DragDrop from '@uppy/drag-drop';

and my dragdrop setup looks like this

this.uppy.use(DragDrop, {
            target: '#drag-drop-area'
          })

I’m following this guide almost to the letter but it keeps telling me that I have an invalid target. Is there something that I’m missing?

2

If that is taken directly from your application code, then it’s because the target attribute isn’t the right ID. Try changing the second snippet to this:

this.uppy.use(DragDrop, {
target: '#file-select-box'
})

While you’re at it, you might want to check out our recent Vue integration, which simplifies working with Vue & Uppy

- Andrew