Good for avatars and such!

Input file fields in HTML forms are notoriously ugly and inconsistent across browsers.

ImageDrop is a tiny (989 characters), deceptively simple, and entirely effective way to make file input fields consistent looking while adding an image preview and placeholder text.

ImageDrop employs a little CSS trickery to change the file input field into a drop zone.

During hover, a div is temporarily shown to act as the placeholder.

On drop, javascript validates that the file is an image and generates the preview by updating the the background-image style of the parent div with the local image -- all on the client-side of course.

The html structure in the form looks like this:

<div data-imagedrop>
  <input type='file'>
  <div>Placeholder</div>
</div>

And, yes, that's completely compatible with bootstrap.

ImageDrop has been packaged as a gem, but the raw js and css files are included for use outside of rails.

Check out the demo or visit the ImageDrop repo on GitHub.