HTML5 drag and drop support now in Ibis Reader

by Liza Daly

HTML5 is a wild grab-bag of technologies. One of the lesser-known bits at the bottom of the bag is the drag and drop API. This allows you to physically drag files from your computer into a browser page, and have the browser do something with the file (typically upload it).

If you’re logged in to Ibis Reader from a computer (not the mobile interface), you can now upload one or even many EPUB files at a time just by dragging. Here’s how it looks in Chrome:

Dragging a file into the Ibis Reader window produces a dialog box inviting the user to let go and drop the file

This menu will open up on a “drag” event, meaning that you’ve moved some file from your desktop onto the Ibis Reader window.

When you “drop” the file into that space, a progress bar appears showing the upload time:

Dropping the file will show a progress bar

This uses the HTML5 <progress> element on supported browsers.

When complete, you’ll be taken to your personal library of books and the new book will be at the top.

If there’s an error, you’ll see it on the upload dialog:

Trying to upload a non-EPUB file by dragging will show an error message

Try it with multiple files simultaneously!

Support

This should work in Firefox 5+ and recent versions of Chrome. It doesn’t currently work in Safari 5.x.

For browsers which don’t support drag and drop yet we also improved the normal file upload method (in which you click “Add a Book” to upload by selecting a file from your computer). The “Add a Book” feature now supports multiple file upload, so if you select multiple files from the dialog, it will upload them in succession.

The file upload dialog now supports multiple files

This will work on Safari as well as other browsers which support multi-file upload.

In any scenario, if you upload multiple files and one has an error, the upload process will stop at that file (other files that came before will successfully be added to your library).

Enjoy!

Tech details

Safari 5 currently has a bug that prevents the <progress> element from being nested inside of a block-level element like a <div> (This was a WebKit bug whose fix just hasn’t made it into Safari yet.) In Safari you may not see the progress bar because of this.

I would have preferred to let you drop the files anywhere on the site, rather than just in that big box, but Chrome requires that the drop point for file uploads be inside of a <form>. You’ll see the same paradigm if you use Gmail’s drag and drop support for attachments (did you know you could do that?)