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:
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:
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:
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.
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?)