How to drag and drop file attachment into the browser?

Question

It seems Gmail is just starting this feature, and it doesn't require you to install any plugin etc.

It works in both Firefox and Chrome but not IE.

Answer 1

Use dropzonejs.

It's a lightweight library supporting file drops by simply adding the dropzone class to form elements. It handles the files with HTML5 and even shows previews of images dropped into it. In incompatible browsers it falls back to a simple file upload form. Also: it looks good.

Have a look at it!

Disclaimer: I wrote this library.

Answer 2

Let's summarize one example here before all those links break =)

When you drag and drop with the HTML5 DnD API, a file form your desktop / file browser into the browser:

• the drop event callback object has a dataTransfer.files property
• which is a HTML5 File API FileList object
• which contains File API File objects.

From there on, use the File API to do the upload, which has already been covered in many other places.

Full example:

<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div>
<script>
  var file_drop = document.getElementById('file-drop');
  file_drop.addEventListener(
    'dragover',
    function handleDragOver(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      evt.dataTransfer.dropEffect = 'copy'
    },
    false
  )
  file_drop.addEventListener(
    'drop',
    function(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      var files = evt.dataTransfer.files  // FileList object.
      var file = files[0]                 // File     object.
      alert(file.name)
    },
    false
  )
</script>

Fiddle.

This will alert the file basename (path cannot be obtained from the file API).

BTW, the other basic way you can get File object is through the .files IDL attribute of an input type=file. This method is more friendly for small screens than DnD, where you need two windows open at the same time at good relative positions. Unfortunately, it seems that currently it is not portable to drag and drop into a input type=file: drag drop files into standard html file input

Source: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 3

It's using the HTML5 drag and drop API.

http://html5doctor.com/native-drag-and-drop/

Answer 4

They are using one of HTML5's features. IE doesn't support HTML 5 or standards or...

Here is a blog that explains the drag and drop reasonably well.

Answer 5

HTML5 drag and drop API is available in the bleeding-edge browsers like the others said.

Google Gears (a "plugin") can add the drag'n'drop functionality (I know Google Wave used gears at least in the Google Wave dev preview) for older browsers (FF and IE). Note that gears will not be supported forever

Answer 6

I suppose you are looking for this http://www.plupload.com/