Posts Tagged ‘FileAPI’

During a recent hunt for a nice HTML file upload library, I came across FileAPI by Mail.ru. In particular, I was looking for a library that was completely framework-independent. jQuery File Upload is a very nice plugin that I’ve used in the past, but for this particular project we needed something not based on jQuery.

What’s particularly cool about this library is that it includes a handful of functions for manipulating images directly. We wanted to generate an image thumbnail before we sent the file to the server for storage. FileAPI can generate a <canvas> thumbnail for you and you can generate a Base64 string of the image by calling .toDataURL() on the <canvas> element.

I took the simple example from the FileAPI docs and tossed them in a CodePen for you to play with. In my example, I filter any selected files to only images, generate a thumbnail for each one, and append it to the document.

Check it out:

See the Pen FileAPI Preview by Cody Sand (@marpstar) on CodePen.

FileAPI also includes functions for transporting the files to your server, capturing images from webcam, drag-and-drop, and a bunch of other stuff you’d expect from an upload library, dependency-free.