30.12.2024

Como Alterar o Texto do Botão de <input type="file"> em HTML

Resposta Rápida

Para personalizar o texto no campo de seleção de arquivos, crie um rótulo estilizado como um botão e torne o elemento <input> invisível. Atribua um manipulador de clique a este rótulo que acione a seleção de arquivos. Aqui está um código de exemplo para implementação:

<style>
  .file-input-container {
    overflow: hidden;
    position: relative;
  }

  .file-input-label {
    background: #f0f0f0;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
  }

  .file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
</style>

<div class="file-input-container">
  <label class="file-input-label" for="file-upload">Enviar Arquivo</label>
  <input id="file-upload" class="file-input" type="file">
</div>

Para adaptar o design ao seu projeto, edite o texto e o estilo do elemento .file-input-label. Agora o botão de envio de arquivo está mais atraente!

Expandindo Funcionalidades com jQuery e Plugins

Para enriquecer as capacidades padrão e garantir melhor compatibilidade com diversos navegadores, você pode usar o plugin Bootstrap FileStyle. Adicione o arquivo bootstrap-filestyle.min.js ao seu projeto e utilize jQuery para personalizar os estilos dos botões de seleção de arquivos:

$(":file").filestyle({text: "Selecionar Arquivo"});

Este plugin também fornece atributos de dados para personalização detalhada da aparência e melhoria da experiência do usuário.

Melhorando o Estilo com CSS e JavaScript

Personalização Detalhada com CSS

Utilize o pseudo-elemento ::before no CSS para criar um design exclusivo para o elemento de entrada e ocultar o padrão. Altere o texto do botão através da propriedade content:

.custom-input::before {
  content: 'Selecionar Arquivo';
  display: inline-block;
  background: #f0f0f0;
  /* Adicione seus estilos preferidos aqui */
}

JavaScript: O Elo Conector

Para manter a funcionalidade após estilizar o botão, ligue-o ao campo de entrada oculto usando o evento onclick em JavaScript:

document.querySelector('.custom-file-button').onclick = function() {
  document.querySelector('#hidden-file-input').click();
};

Definir o rótulo com um identificador único para a entrada de arquivo melhora a acessibilidade e aprimora a experiência do usuário.

Estratégias para Manter a Compatibilidade Entre Navegadores

Lidando com Versões Antigas de Navegadores

Para garantir suporte a versões mais antigas de navegadores como IE9 e IE10, aplique métodos de fallback para acionar cliques no campo de entrada de arquivo oculto usando jQuery, ou utilize uma solução baseada em Flash, como Swfupload, para reestruturar o texto do botão.

Teste de Compatibilidade do Atributo 'accept'

Para garantir uma representação uniforme dos tipos de arquivos disponíveis para seleção, teste o atributo accept em diferentes navegadores, especialmente ao usar estilos e plugins personalizados.

Visualização

O uso típico de <input type="file"> pode ser visualizado como uma máquina de venda com um rótulo que, por padrão, oferece "Selecionar Arquivo."

Agora vamos mudar isso para "Enviar Documento." Envolva o elemento input em uma tag label, torne-o invisível e personalize sua aparência:

<label for="file-upload" class="custom-file-upload">
    Enviar Documento
    <input id="file-upload" type="file" style="display:none;"/>
</label>

Isso transforma nossa máquina de venda:

🏷️ Rótulo Elegante (customizado): "Enviar Documento"

Voilà! Atualizamos estilisticamente a mensagem padrão!

## Recursos Úteis

1. [MDN Web Docs: `<input type="file">`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input/file) - Um guia abrangente sobre o **Elemento de Entrada de Arquivo HTML** e seus atributos.
2. [Criando um Botão de Upload de Arquivo Personalizado com HTML e JavaScript](https://www.quirksmode.org/dom/inputfile.html) - Um guia passo a passo para estilizar o **campo de seleção de arquivos** para uma experiência do usuário aprimorada.
3. [Usando a API Drag-and-Drop HTML em React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/) - Uma explicação detalhada sobre a integração da funcionalidade de **arrastar** nos campos de seleção de arquivos ao usar o React.

Video

Navigation