The past week, I’ve been testing out the drag and drop APIs provided by Firefox and Chrome. It’s relatively simple to add a desktop feel to your web apps just by hooking in.
Think about what happens you drag and drop a file onto your browser window. Your
browser will take the file and attempt to open it. To perform a custom behavior
for a drag and drop on
a web page, you need to tell the browser, “No thanks. I’ll take it from here.”
preventDefault(). The former will stop the event flow
to other handlers, and the latter stops the browser from performing the default
behavior, opening the file.
In the case that you’re using jQuery, calling the attribute
originalEvent is necessary to
preventDefault(). You’ll want to bind the
ignoreDrag function the dragenter and dragover events of the target.
You can use these events to style your target as well, to give visual confirmation that a file is able to be dropped on that element.
Now that you’ve stopped the normal behavior for the drag, you need to do some
behavior when a file is dropped. The event argument of the drop event has an
dataTransfer which contains information about what was
dropped. For accessing data like text or urls, invoke
getData() passing one of
the types given in
types. For file access use the
files attribute to
retreive an array of File objects.
File objects contain information about the name and size of the file. Also, they can be passed to an XmlHttpRequest and sent as a blob of data. That’s useful for doing an upload of drag and dropped files. Andrea Giammarchi wrote a small library called sendfile for uploading an array of File objects. It could be used as follows:
Firefox allows you to read from a File object through three different methods:
getAsText(encoding). The first will
provide raw binary data.
getAsDataURL will provide a base-64 formatted
getAsText will return a string from the encoding provided.
getAsDataURL will allow you to populate the src attribute of an img
tag with a data string.
If you’re using Firefox (3.6+), drag an image over the image below. The image will be replaced by the image you drop. No need to send data round trip!
20 Sep 2010