02.01.2025

Como Personalizar o Botão e o Texto no Input Tipo='File' em HTML

Resposta Rápida

Para alterar o texto padrão no elemento input[type="file"], primeiro torne o elemento invisível usando CSS e, em seguida, anexe seu próprio botão que ativará a seleção de arquivos. Aqui está um exemplo de código:

<style>
  #upload-arquivo { 
    display: none;
  }
</style>
<input type="file" id="upload-arquivo"/>
<button onclick="document.getElementById('upload-arquivo').click()">Enviar Arquivo</button>

Neste exemplo, o input está oculto, e a função de selecionar um arquivo é realizada pelo botão estilizado. Ao clicar no botão, você aciona um clique no elemento input oculto.

Guia Prático para Personalizar o Elemento de Seleção de Arquivos

Passo 1: Aproveitando o Poder dos Labels

Use um label com o input e o atributo for para melhorar a acessibilidade do elemento:

<label for="upload-arquivo" class="custom-file-upload">
  Clique aqui!
</label>
<input type="file" id="upload-arquivo" style="visibility:hidden;"/>

Passo 2: Transformando-se em Magos do CSS

Estilize o label como um botão usando CSS:

.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Passo 3: Amplificando com JavaScript

Adicione JavaScript para exibir o nome do arquivo selecionado. Isso permite que o usuário veja que um arquivo foi enviado:

document.getElementById('upload-arquivo').onchange = function(e) {
  document.querySelector('.custom-file-upload').innerText = e.target.files[0].name || 'Clique aqui!';
};

Passo 4: Frameworks – Nossos Aliados

Use frameworks como Bootstrap e Ratchet para garantir que os elementos sejam exibidos de forma consistente em diferentes navegadores e dispositivos.

Visualização

Suponha que você queira substituir o texto padrão "Escolher Arquivo" por "Enviar Imagem":

Texto padrão: 
🏪 "Escolher Arquivo" 🔳

Resultado desejado:
🏪 "Enviar Imagem" 🖼️

Ao ocultar o elemento original e estilizar o label, você alcança o resultado desejado:

input[type="file"] {
  visibility: hidden;
}
.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

E aqui está o seu label que se parece com um botão:

<label class="custom-file-upload">
  🏪 "Enviar Imagem" 🖼️ <input type="file"/>
</label>

Dessa forma, você atualizou com sucesso o elemento de controle! 🎨🖌️

Atenção aos Detalhes

Mantendo a Amigabilidade para o Usuário

Esforce-se para replicar o comportamento padrão do input para que os usuários saibam intuitivamente como interagir com o elemento.

Adaptando-se a Diferentes Tamanhos de Tela

Certifique-se de que seu botão personalizável tenha uma boa aparência e funcione bem em todos os dispositivos.

Exibindo Nomes de Arquivos Selecionados

Utilize JavaScript para permitir que os usuários vejam os nomes dos arquivos enviados.

Harmonizando com o Design Geral

Alinhe seu botão personalizável com o estilo geral da sua aplicação. Isso proporcionará uma experiência confortável ao usuário.

Recursos Úteis

1. MDN Web Docs - <input type="file"> — informações detalhadas sobre o widget de upload de arquivos em HTML.
2. html - Estilizando o botão para input tipo "file" - Stack Overflow — discussões da comunidade sobre a estilização do elemento de seleção de arquivos.
3. Desenhando Elementos de Seleção de Arquivos com Bootstrap — um guia para criar botões de seleção de arquivos usando Bootstrap.
4. Como Criar uma Funcionalidade de Upload de Arquivos Drag-and-Drop com JavaScript Puro — Smashing Magazine — um tutorial passo a passo sobre como criar uma interface de upload de arquivos drag-and-drop.
5. Lendo Arquivos em JavaScript — uma visão geral das capacidades da API de Arquivos HTML5.
6. Tutorial: Usando a API de Arquivos HTML5 — um guia detalhado da DigitalOcean sobre como trabalhar com uploads de arquivos em HTML5.

Video

Navigation