Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration, which consists of:

  • enable file dragging and dropping onto a web page element

  • analyze dropped files in JavaScript

  • load and parse files on the client

  • asynchronously upload files to the server using XMLHttpRequest2

  • show a graphical progress bar while the upload occurs

  • use progressive enhancement to ensure your file upload from works in any browser

The File API

  • FileList: represents an array of selected files

  • File: represents an individual file

  • FileReader: an interface which allows us to read file data on the client and use it within JavaScript

JavaScript Events

Dragged Object

  • dragstart

  • drag

  • dragend

Target Object

  • dragenter

  • dragover

  • dragleave

  • drop

dataTransfer

  • dropEffect: copy | move | link | none

  • effectAllowed: copy | move | link | copyLink | copyMove | linkMove | none | all (default)

  • files

  • types

  • setDragImage(imgElement, x, y): set custom icon along dragging

  • setData(format, data)

  • getData(format)

  • clearData()

Notice

By default, brower will refuse all drag actions(and file will be opened in browser if files from desktop dragged into the browser), so e.preventDefault() should be added in dropover and drop event

Dragging Text will automatically set e.dataTransfer.setData('text/plain', node.innerText)

Dragging File will add files to e.dataTransfer.files