Upload Files in a Browser Using Drag and Drop

A typical file upload control in HTML looks like this:


You have to type the file path or can you click on "Browse" to get the path using a dialog provided by the operating system. This is usually cumbersome if you have a file manager like Windows Explorer that shows the file in the current view because you have to get the path of the file.

So it would be nice to drag and drop the file to the upload control and obtain the path. In Firefox, you can do this if you have an extension called dragdropupload. The extension should work in any site that lets you upload files using standard controls, but here are 3 examples of Google services where you can be more productive if you use it.

When you compose a message in Gmail, you can click on "Attach a file" and drag and drop one or more files in the input box. You can also drag and drop the files over the "Attach a file" link.

Another example: Picasa Web Albums lets you create albums and upload photos online. While in Internet Explorer you can do that easily using an ActiveX control, in Firefox you can add up to 5 photos at a time, one by one. The extension can save you time, because you can just select 5 photos in a file manager and drag-and-drop them to one of the upload controls.

This extension is also the magical way to upload more than one image at a time in Blogger. Just select the images you want to upload, and drag them to the standard control. Everything will look messy, like in the screenshot below, because the extension adds more upload controls at the bottom of the page, but the important thing is that it works and there's no limit for the number of images (the total size should be less than 8 MB, though).