Bom para avatares e tal!
Os campos do arquivo de entrada em formulários HTML são notoriamente feios e inconsistentes entre os navegadores.
ImageDrop é uma forma minúscula (989 caracteres), aparentemente simples e totalmente eficaz de tornar a aparência dos campos de entrada de arquivo consistente ao adicionar uma visualização da imagem e um texto de espaço reservado.
ImageDrop emprega um pouco de truques CSS para alterar o campo de entrada do arquivo em uma zona para soltar.
Durante o foco, um div é mostrado temporariamente para atuar como o marcador.
Ao soltar, o javascript valida que o arquivo é uma imagem e gera a visualização atualizando o estilo da imagem de fundo do div pai com a imagem local – tudo no lado do cliente, é claro.
A estrutura html no formulário se parece com isto:
<div data-imagedrop>
<input type='file'>
<div>Placeholder</div>
</div>
E, sim, isso é totalmente compatível com bootstrap.
ImageDrop foi empacotado como uma gema, mas os arquivos js e css brutos são incluídos para uso fora do rails.
Confira a demonstração ou visite o repositório ImageDrop no GitHub.