File Under: HTML5, Web Apps, Web Standards

Google Turns to HTML5 for Gmail’s New Drag-and-Drop Attachments

gmaildragndropGoogle continues to use HTML5 to push its web apps into the future. The latest bit of HTML5 to feel Google’s love is drag-and-drop support, which is now a standard part of Gmail. If you’re using Google Chrome 4 or Firefox 3.6, you can now simply drag a file from your desktop onto a message window and Gmail will automatically attach the file.

The new feature solves one of the most common complaints from web app users — why can’t I just drag and drop files like I do everywhere else? Well, thanks to the new APIs in HTML5, you can.

We’ve seen a few implementations of HTML5′s drag-and-drop features, including on Google’s own Wave, but Gmail, which has over 140 million users, is by far the most popular web app to embrace the new features. Part of the reason for the slow uptake of drag-and-drop support might well be some of the difficulties developers have had in supporting the feature — differences between browsers make drag-and-drop one of the most complex HTML5 features to implement.

Hopefully, with Gmail leading the way, drag-and-drop for uploading files will become more common since it is, as your less tech-savvy friends have no doubt pointed out, the way things should have been from the beginning of the web app era.

Gmail’s drag-and-drop support has skipped the usual Gmail Labs trial period and gone straight to standard feature (the feature is also already available for Google Apps for your Domain users).

To see drag-and-drop in action, just grab a file off your desktop and drag it into a Gmail compose window. The area above your message, where attachments are shown, will change to say “Drop files here.” Drop the file in the target area and it will automatically be uploaded and attached to your message.

For now, the new features are limited to Firefox 3.6 and the latest version of Chrome, but Google says it’s working on support for other browsers. However, that’s an odd thing for the company to say given that the only real way to use HTML5 drag-and-drop is if the browsers themselves have added support (again Internet Explorer 8 is left behind since it doesn’t support drag-and-drop — unless you’re running Google Chrome Frame).

Curiously, Safari 4 supports the HTML5 drag-and-drop API, but for now, the feature won’t work in Gmail if you’re using Safari.

Drag-and-drop isn’t the only new feature making its way into a Google product. The Google Docs team has also announced it will be switching from Gears to HTML5 to power its offline features. For the most part, the change won’t be noticeable since Gears was designed as placeholder hack for HTML5′s offline features, though it does mean that offline support will be disabled for a few days in May.

See Also: