9 Trechos de campo de upload de arquivo de código aberto personalizado

Você pode encontrar ferramentas incríveis para melhorar os formulários da web, desde kits de interface do usuário até plugins jQuery avançados.

Mas um dos campos de entrada mais difíceis de editar é o campo de upload. Este é um elemento de entrada HTML padrão e permite que os usuários carreguem arquivos de seus computadores. Reestilizar o campo de upload é um grande desafio em comparação com outros elementos de formulário.

Se você deseja personalizar suas entradas de upload, esta galeria ajudará. Coletei 9 campos de upload feitos à mão do CodePen que provam que você pode redefinir o estilo do campo para parecer como quiser.

1. Upload de arquivo simples

O desenvolvedor Wallace Erick criou este campo de upload simples com apenas um pouco de CSS e JavaScript. Ele pega emprestado a tendência do flat design, que evita gradientes focando em cores únicas – muitas vezes com um esquema de cores monocromático.

Você pode adicionar este design de upload de arquivo em qualquer página e deixá-lo com uma ótima aparência. Tudo o que você precisa fazer é alterar o esquema de cores e posicioná-lo corretamente em seu formulário.

Ele funciona exatamente como você esperaria e é executado no elemento de entrada HTML padrão. Portanto, isso também pode ser usado em navegadores mais antigos e também deve funcionar em dispositivos móveis.

2. Upload de arquivo personalizado

Aqui está um design que fica um pouco mais abstrato com o campo de upload. O desenvolvedor Aaron Vanston criou este upload de arquivo como uma réplica dos que vemos em sites maiores.

Pense em grandes sites de tecnologia como Dropbox, Google+ e Facebook. Eles geralmente têm uma área de arrastar e soltar com um grande espaço “clique aqui” para iniciar a janela de upload. Isso é exatamente o que Aaron fez com este trecho.

Ele depende de jQuery e uma boa quantidade de JS/CSS para funcionar. E embora use o campo de entrada HTML padrão, ele também lida com o processo de upload com funções JS personalizadas.

Se você conhece o JavaScript, isso pode funcionar como um modelo útil para criar sua própria interface do usuário de upload de arquivos.

3. Uploader animado responsivo

Se você faz qualquer tipo de web design moderno, sabe que precisa ser responsivo. Os usuários móveis podem fazer upload de arquivos para a web por meio desses mesmos formulários, portanto, utilizar um campo de entrada responsivo é uma ótima ideia.

Dê uma olhada neste design para obter um exemplo de um campo de upload compatível com dispositivos móveis de qualidade. É muito básico, com apenas um pequeno espaço de upload quadrado com suporte para arrastar e soltar.

Apenas observe que isso não usa o elemento de entrada - portanto, não há como clicar para fazer o upload. Eu acho que é um pesadelo de usabilidade, mas isso também é apenas um trecho de amostra usado para teste – então não é voltado para usabilidade perfeita.

Se você trouxer esse snippet para seu site, é recomendável adicionar um campo de upload típico ao lado da área de arrastar e soltar.

4. Carregador personalizado

Projetos de desenvolvimento diários são uma ótima maneira de aprimorar suas habilidades. Drew Vosburg seguiu essa abordagem para criar um formulário de upload legal hospedado gratuitamente no CodePen.

É altamente personalizado com funções JavaScript que lidam com o efeito de arrastar e soltar. Mas esse campo de entrada foi criado para suportar toque e clique, além de arrastar e soltar.

A área clicável é um rótulo HTML estilizado com CSS. Esse elemento de rótulo é anexado ao campo de entrada, que fica oculto na página. Funciona como um campo clicável. Definitivamente uma ideia inteligente e totalmente semântica para inicializar.

5. Interface de upload de fotos

Aqui está um dos trechos mais complexos, mas impressionantes, que já vi no CodePen. Ele permite que você envie fotos para uma galeria diretamente do seu computador. Com cada foto que você enviar, ele mostrará uma prévia na página.

Ele funciona puxando imagens por meio de JavaScript e, em seguida, convertendo-as em base64 para incorporar em CSS.

Sempre que você fizer upload de imagens para um servidor, eles gerarão um arquivo temporário. Em seu próprio servidor, você pode usar esse arquivo temporário para exibir a imagem. Mas agora que CSS suporta base64, esta é outra alternativa.

A interface é super limpa e o recurso de upload combina perfeitamente.

6. IU de upload azul simples

Se você estiver procurando por um campo de upload sem JS, dê uma olhada neste exemplo, criado por Stephen Baker.

Ele usa CSS3 puro para alterar o estilo de entrada em um botão grande. Ele funciona com o ícone de upload do Font Awesome e simplesmente envolve uma área circular inteira ao redor do campo de upload.

Você pode alterar o estilo, cor, ícone ou qualquer outra coisa para que isso corresponda ao seu site. É basicamente uma alternativa super limpa ao estilo de entrada padrão e roda em CSS3 puro.

7. Entrada de upload de arquivo personalizado jQuery

O desenvolvedor Terry Young pegou um pouco do jQuery e o usou para aprimorar alguns campos de upload existentes. Este é o resultado (e é um resultado e tanto, se é que posso dizer).

Por meio desses estilos, você pode alterar o texto do campo de upload, tamanho, cor do botão ou remover o campo de texto para usar apenas um único botão.

Observe que isso requer uma boa quantidade de jQuery porque a maioria desses recursos não pode ser alterada com CSS. Se você não se importa de trabalhar com jQuery, essas opções são fenomenais.

8. Arquivo de entrada de IU simples

Aqui está um campo de upload plano ligeiramente diferente criado por Geoffrey Crofte. Este também depende de algum JavaScript, mas estiliza toda a entrada com propriedades CSS3.

Como este é um snippet de amostra, você não pode fazer upload de arquivos em qualquer lugar. Mas isso é fácil de mudar se você mover isso para seu próprio site. O design e a configuração principais são realmente o que dão vida a esse trecho.

A função de retorno é executada em JavaScript, então é aí que você lida com os uploads de arquivos, alterações na tela ou qualquer outra coisa.

O melhor de tudo é que esses códigos funcionam em navegadores que datam do IE 8! Portanto, é uma opção bastante sólida se você estiver preocupado com a acessibilidade.

9. Campos de carregamento múltiplo

Aqui está um campo personalizado final com uma reviravolta: parece bastante simples esteticamente - mas o verdadeiro prêmio está na funcionalidade.

Este campo de upload foi projetado para oferecer suporte a vários arquivos de uma só vez. Você normalmente não vê isso com campos de entrada – ou pelo menos não por padrão. Os usuários precisam selecionar vários arquivos na mesma janela e o back-end precisa oferecer suporte a isso.

Com este snippet, você pode listar todos os nomes de arquivos em um campo de upload. Você pode até usar JavaScript para anexar esses nomes de arquivos em outro lugar na página à vista.