
Gmail: Drag and drop attachments onto messages - niravs
http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachments-onto-messages.html
======
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/>

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

------
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...](http://productblog.37signals.com/products/2010/04/new-in-campfire-
drag-and-drop-uploading.html)

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.

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

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

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

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

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

~~~
hopeless
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).

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

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

~~~
neovive
Have you found Firefox 3.6.3 stable on the Mac?

~~~
dchest
I rarely use it, but it never crashed.

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

