How to use drag-drop - 7 common examples

constructor(returnType='url'){
		super()

		this.returnType = returnType

		this.element = document.body.querySelector('#file-drop')
		this.button = this.element.querySelector('#uploadButton')
		this.status = this.element.querySelector('#uploadedFile')
		/**
		 * DRAG DROP HANDLING
		 */
		dragDrop('body', (files) => {
			const file = files[0]
			this._getFile(file)
			
		})

		/**
		 * FILE UPLOAD BUTTON CLICK
		 */
		this.fileDialog = this.element.querySelector('.file-input')
		this.fileDialog.addEventListener('change', e => {
			// console.log(e)
			if (e.target.files && e.target.files[0]){
				this._getFile(e.target.files[0])
			}
		})

async function setup () {
  // setup dragdrop
  dragDrop(document.body, onDropFiles)

  try {
    // load platform info
    let browserInfo = beaker.browser.getInfo()
    window.OS_CAN_IMPORT_FOLDERS_AND_FILES = browserInfo.platform === 'darwin'
    osUsesMetaKey = browserInfo.platform === 'darwin'

    // load data
    let url = await parseLibraryUrl()
    archive = new LibraryDatArchive(url)
    await archive.setup()
    await setupWorkingCheckout()

    // go to raw key if we have a shortname
    // (archive.info.url is always the raw url, while archive.url will reflect the given url)
    if (archive.url.startsWith(archive.info.url) === false) {

_initDragDrop() {

		dragDrop('body', (files) => this._validateImageAndEmit('load-source', files))
	}

componentDidMount () {
    if (!this.removeWarcAdder) {
      console.log('attaching warc adder on live dom')
      this.removeWarcAdder = BeamMeUpScotty('#warcUpload', (files) => {
        console.log(`adding warcs maybe to col ${this.props.params.col}`, files)
        let addMe = []
        let badFiles = new Set()

        files.forEach(f => {
          console.log(f)
          let ext = path.extname(f.path)
          if (ext === '.warc' || ext === '.arc') {
            addMe.push(f.path)
          } else {
            badFiles.add(ext)
          }
        })

        if (badFiles.size > 0) {
          notify.notifyWarning(`Unable to add files with extensions of ${joinStrings(...badFiles, { separator: ',' })}`)

componentDidMount () {
    this.resetUploader()

    this.removeDragDrop = dragDrop(findDOMNode(this.uploadContainer), files => {
      this.uploader.add(files, err => {
        if (err) {
          console.warn(err.stack)
        }
      })
    })
  }

componentDidMount () {
    if (!this.removeWarcAdder) {
      this.removeWarcAdder = BeamMeUpScotty('#warcUpload', this.fileListener)
    }
  }

install () {
    const target = this.opts.target
    const plugin = this
    this.target = this.mount(target, plugin)

    dragDrop(`${this.target} .UppyDashboard`, (files) => {
      this.handleDrop(files)
      this.core.log(files)
    })
  }
}