Monday, June 08, 2009

Google Gears Desktop Drag and drop operation


During the Google I/O event, The Google Wave prototype has been unveiled. During the demonstration, a drag and drop operation has been realized between the desktop and the browser. This new capability is possible thanks the new Google Gears plugin V0.5.21.0.
The main new features available with this Gears version are:

  • Drag & Drop support for dragging files into a web page and letting the web page act on those files.
  • Image thumbnailing.
  • Blob builder API, which allows script to build binary blobs, including valid multi-part-form-encoded blobs that contain binary file parts, which can then be uploaded using Gears.HttpRequest.

In this post, i will demonstrate how to use 2 features:

  • Drag & Drop support between desktop and browser.
  • Image thumbnailing.

To illustrate those 2 interesting features, a basic web application is developed. This web application allows a user to drag and drop pictures from desktop to browser. The Gears plugin will resize the image to keep in the local server 2 versions of the image (1 thumbnail and 1 800x600 normalized). A basic image gallery browser allows to review the images even in offline mode.


This demonstration is only available with Firefox3.0 with the Gears plugin V0.5.21.0.

Drag & Drop support

The drag and drop operation is available between the desktop and an HTML element of the web page. To specify the drop element target, listeners should be added to the DOM element. As you can see in the next JavaScript code, 4 events are configurable (‘dragenter’, ‘dragover’, ‘dragexit’, ‘dragdop’) and need to be linked to callbacks. Event names are clear enough to not be explained more.

This next JavaScript code illustrates how to activate or de-active the drag and drop operation on an HTML DOM element (dropZone).


The handleDragEnter, handleDragOver and HandleLeave callbacks call the finishDrag method in charge of modifying the mouse cursor (in blue, indicating that copy is in progress) and checking if the drop operation is allowed (in green)


The handleDrop callback is used to manage the drop operation. This function will do the following action:

  • Receive and analyze the file coming from the desktop. MetaData like the image dimension, imageType are available from the blob object (line 132)
  • Create a thumbnail of the picture(used later for the gallery). This operation is explained more into detail in the next paragraph.
  • Create a reduced picture (800x600) of the original picture.
  • Store those 2 new pictures in the Local server. The captureBlob (line 144) method is call to save the picture blob into the local server.
  • Store this new image in the local database.


Image thumbnailing

This new feature allow to resize a picture directly in the browser. This operation was not possible before and a round trip was required with the server to do this operation. Operation to resize a picture are the following:

  • Create a GearsCanvas (line 133).
  • Use the decode method with the blog information in parameter (line134).
  • Use resize method (line 135) to resize the image (2 methods are available: nearest and bilinear).
  • Use the encode method (line 136) to return the resulting blob.
  • To use the image later in the HTML page, the blob must be stored in the local server (line144).

You can note that it is not possible yet to display directly the resized image in the HTML web page and the Gears localServer must be used to store this picture. The img element tag will use this localServer image to display the picture in the browser.

A next step could be to create an other GearsCanvas and display the resizing picture blob directly in that canvas.

Accessing the demo and browsing the code

To test the prototype:

  • Use Firefox 3.0.
  • Install Gears V0.5.21.0.
  • Drag and drop pictures(more than 1024x768 images) in the drop zone.
  • The dropped image is displayed in the zone and added in the gallery. Multiple pictures can be drag and drop in the same operation.
  • The new added images are stored in the local server and in the localDb. When you will access the web page another time, the picture gallery is still present.
  • If you want to erase the Local store and the Local db 2 buttons are available.
  • In bonus, the web application is available offline (Gears feature). Some bugs are still present for the offline management mode.

The demo is available here.

The code is available here.


Those new Drag and Drop operation and thumbnailing features are very promising and can be use for multiple use cases where the traditional “browse button” was added in the web page. Those features are not HTML5 compliant and will be available only with the Gears plugin…


Anonymous said...

How to start using it. I downloaded it at my machine, started the index html file. Clicked on EnableDragDrop button, and then dragged a image in the given area on page, but it didnt work as shown in the video. Whole article is very much understandable, but I want to use it on my own, So please help.


BogusRed said...

Hi Fred, Thanks for writing this tutorial. I tried out the demo however and couldn't get it to work. When I drag and drop files, it just opens in the image in the browser the way the browser would normally react when one drags and drops files into a tab/browser window. I'm using FF 3.5, Gears

Anonymous said...

Seems like the demo doesn't work.

Anonymous said...

Hi, I tried the demo too and it didn't work. I dropped the file but it just displayed the file://img.jpeg

Good article, thought it might be too good to be true!


Anonymous said...

Hi, I tried the demo too and it didn't work. I dropped the file but it just displayed the file://img.jpeg

Good article, thought it might be too good to be true!


Frederic shared items