Gmail: Drag and drop attachments onto messages

[misterbwong]

If anyone else is wondering (as i did) how this works, I believe they're using the w3c file api. Details here:

http://dev.w3.org/2006/webapi/FileAPI/

[mgriffith]

actually, they are most likely using part of the new drag and drop API in HTML5. firefox and chrome both provide a `ev.originalEvent.dataTransfer` object as part of the DragEvent interface. additionally (and importantly), they allow the drag/drop to originate from outside of the browser.

see: http://decafbad.com/blog/2009/07/15/html5-drag-and-drop

and: http://hacks.mozilla.org/2009/07/html5-drag-and-drop/

[sp332]

Example code from Mozilla Hacks: http://hacks.mozilla.org/category/fileapi/

[mattparcher]

37signals also announced drag and drop file upload today, for their Campfire app (web-based chat), but it supports Safari in addition to Chrome and Firefox (3.5, instead of 3.6 as required by Google): http://productblog.37signals.com/products/2010/04/new-in-cam...

Does anyone have an idea as to how 37signals solved it differently, with more browser support?

[anurag]

It's great that they're supporting this, but the UI is unintuitive - you can only drag files onto the green box (which is ugly btw) but users will try to drag files onto the message textarea, which won't work. Even changing 'Drag files here' to 'Drag files into this box' will help.

[jcnnghm]

I don't know, I had to attach files earlier, and it seemed pretty obvious to me. Just checked, and the actual text is "Drop files here".

[oliveoil]

I like how the screenshots show a typical webbrowsing session: your main browser hidden, only the gmail message compose window visible and neatly sized-down so there's space for the folder window on the left.

[thwarted]

You know you can hit the little overlaid boxes with the arrow pointing to the upper right in the upper right of the compose screen to "pop-out" the new email composition into another, bare window, right?

[slackerIII]

Now if only I could paste screenshots in.

[natrius]

On Linux (Gnome), you can drag and drop from the save dialog in the Take Screenshot app so you never actually have to save it. I just tested it with GMail and it works like a charm.

[pibefision]

I recommend you http://getcloudapp.com It's does that in a very conveniente way.

[lunchbox]

This would be huge. Outlook 2010 has an Insert > Screenshot feature that easily beats Gmail in convenience.

[wizard_2]

I've been doing that in firefox and gmail for a long time.

[pieter]

Might be obvious for everybody, but in Safari, you can drop a file on the 'no file selected' text you get after you press 'attach a file'.

[andrewljohnson]

I would have probably used this a lot years ago, but now what I yearn for is tab-autocomplete, emacs-style, for attachment fields.

This is a much faster way for me to attach files, and it doesn't frac my wrists making me touch the infernal mouse.

[joe_the_user]

Drag-and-drop is one of most over-rated features ever:

* It requires excess wrist motion to accomplish some which could be done in few keystrokes.

* Only in a few situation is it ever entirely clear what dragging and dropping will do.

* Outside of, again, a few situations, it is unclear which objects to drag and where to drop them. In anything but file manager, it becomes a frickin' game of Carmen San Diego.

[jrockway]

Why not just send your email from Emacs then? message-mode is great.

[camwest]

Yet my girlfriend drags and drops onto Gmail every time before realizing she is making a mistake.

[fjabre]

Not that I don't applaud the effort but it's kind of awkward/clunky to drag & drop from the desktop to a browser window..

[nooneelse]

Ummm... why? Why is it more awkward/clunky than with any other set of windows? Also, why so negative? If you don't like it, use the old way; it isn't like they removed that.

[spuz]

Cool. This was the only feature of Outlook I've missed since starting to use Gmail for work. Now I'm golden :)

[augustl]

In Firefox 3.6, you can read files with a FileReader. There doesn't seem to be any global FileReader object in 5.0.342.9 beta (Ubuntu). The Gmail file drag and drop works fine, so I'm certain I'm using a supported Chrome version.

Is there any documentation for how the file reading works in Chrome? I would like to implement it in an application of mine that so far only works in Firefox 3.6.

[mothaiba]

Big woop. I've been doing this forever with the dragdropupload add-on. I do like the insert invitation feature though, and wish there was a better way to easily read through emails, archiving as I go, without being directed back to the inbox.

[Shtirlic]

Working on Ubuntu Chrome 5.0.342.9 beta

[c0un7d0wn]

and not working on Ubuntu/10.04 (lucid) Firefox/3.6.3

[EvanK]

Not working in Firefox 3.6 on mac

[dchest]

Works with 3.6.3.

[proexploit]

Sometimes in the past I've forgotten that GMail isn't drag and drop and tried to drag files in. Now it works. I feel as if this feature was developed to personally get me to out myself on my past habits.

[grandalf]

this has been possible for a long time if the drop target is the input type="file" ... which can be styled to look like something intuitive.

It's funny that this sort of UI is finally coming to the web. I had sort of revamped my whole work flow to avoid it, partially due to using lots of web based apps and partially due to linux.

[zsouthboy]

The input type="file" way is one file at a time. You can't drag and drop 4 pictures into a file input.

[elbac]

Doesn't work in chrome on mac

[pinhead]

Just tried it on mine, works just fine.

10.6.3 with Chrome 5.0.342.9 beta

[dchest]

Works for me with 5.0.375.6 dev.

[elbac]

Working now, I had to restart chrome...

[LiveTheDream]

plupload by the makers of tinymce (http://www.plupload.com) Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

Or uploadify (http://www.uploadify.com)