Gmail: Drag and drop attachments onto messages | Hacker News Reader

Gmail: Drag and drop attachments onto messages

gmailblog.blogspot.com

200 pointsniravs55 comments

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/

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

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/

d'oh. you're right. my quick google had me thinking that html5 only allowed for in browser drag/drop so I concluded that it was the file api.

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?

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.

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".

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.

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?

Now if only I could paste screenshots in.

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

how?

Turn on 'Inserting images' in Gmail Labs. And while you're there try 'Message Sneak Peek' too..

I don't think that addresses the essence of SlackerIII's comment. You still have to go through the tedium of launching an external program to take the screenshot, choosing a filename/save location, and then inserting/pasting into Gmail. See my comment (up) about Outlook 2010.

I agree. The inability to PrtScrn+Paste into web forms continues to hamstring online workflow. I have a longer rant on that here: http://www.sharingatwork.com/2009/02/enterprise-collaboratio...

With the python FUSE bindings you could setup a .jpg file on your desktop that could dynamically change based on the contents of your clipboard (and could disappear when the contents aren't an image). It wouldn't be too much more than plugging a bunch of libraries together.

edit: (missed the mention of Outlook, guess you aren't able to run FUSE)

If you have Firefox, you can use the Screengrab! addon to copy the screenshot to the clipboard.

EDIT: Only webpage screenshot, not full desktop. Should be easy to implement an external (background) running program to copy to clipboard the screenshot, though.

Before the lab even came out, you could "paste" image data into an html email.

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

I've using alt-printScreen then ctrl-v to do this for years. Does insert screenshot do something differently?

"Insert > Screenshot" minimizes the Outlook window, lets you select a rectangular area to include in your screenshot (not necessarily the whole screen), and then automatically pastes that screenshot into your message.

Also, if you have OneNote running, at any time you can hit Windows+S to clip an area of your screen and copy to your clipboard. I use it all the time.

Wow, that sounds nice. Easy screenshots makes the quality of bug reports go up so much.

I've used ScreenHunter for a while and it has performed nicely--you can capture a selection or an active window w/ a keyboard shortcut:

http://wisdom-soft.com/products/screenhunter_free.htm

We just recently upgraded to Office '07, so I'm guessing I'll have to wait another 3 years or so for the Office 2010...

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

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.

That's brilliant! It's such a simple feature, but such a huge step in UI magic.

I always hated those needless extra steps in screenshotting. And then two months later your Desktop is full of things you forgot to delete and you had to figure out why you had ever needed a screenshot of top in the first place...

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'.

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.

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

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.

But yet I bet people have been attempting to drag and drop for attachments since Gmail started. For non technical users this is a big help.

This "non-technical user" seems to be a beast similar to the boing-boing quote of William Gibson: "something the size of a baby hippo, the color of a week-old boiled potato, that lives by itself, in the dark, in a double-wide on the outskirts of Topeka. It's covered with eyes and it sweats constantly. The sweat runs into those eyes and makes them sting. It has no mouth... no genitals, and can only express its mute extremes of murderous rage and infantile desire by changing the channels on a universal remote." see: http://www.boingboing.net/2010/04/02/why-i-wont-buy-an-ipad-...

This non-technical user does nothing and understands nothing. They have no fear of tenotinus since they won't be using any functionality for more than ten minutes.

Unfortunately, most web browsers and sites are impossible to navigate by keyboard. So, as you've already got your hand on the mouse and are using it to click links, I think this is actually one situation where it can be justified (unlike, for example, a text editor).

That is why the laptop keyboard/trackpad combo is actually far better than the desktop keyboard/mouse combo. My fingers never leave the asdf jkl; position when mousing around a site. Each finger and thumb gets about the same usage. These things matter a lot if you do a lot of computer interaction.

The vim plugin for firefox is another route that might be good if you were on a desktop machine - I plan to NEVER a desktop for default development again.

And dragging is still hard even if mouse/trackpad is immediately available; the trade-off is a dozen fine-motor motions for about one byte of information input to a computer. My ideal one rough motion = one byte of information to the machine. The only time I'd want to home-in on a target is playing a video game, not choosing a file whose name the machine already knows.

Hands, hands are important. Use your hands gently...

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

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..

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.

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

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.

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.

Working on Ubuntu Chrome 5.0.342.9 beta

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

Not working in Firefox 3.6 on mac

Works with 3.6.3.

Have you found Firefox 3.6.3 stable on the Mac?

I rarely use it, but it never crashed.

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.

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.

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

Doesn't work in chrome on mac

Works for me with 5.0.375.6 dev.

Just tried it on mine, works just fine.

10.6.3 with Chrome 5.0.342.9 beta

Working now, I had to restart chrome...

Reply on news.ycombinator.com