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.