superando os desafios do bootstrap 4 entrada de arquivo

no bootstrap 4, o navegador de arquivos apresenta o texto persistente "Escolha o arquivo ...", apesar da seleção do arquivo. Esta edição deriva do valor oculto na classe CSS de controle de quadra personalizada. Embora seja possível recuperar o valor do arquivo escolhido usando JavaScript, alterar o texto do espaço reservado pode ser mais complexo. Para modificar este texto, basta adicionar CSS ou SASS personalizados da seguinte maneira:

. Conteúdo: "Texto do botão"; }

abordando o valor do espaço reservado oculto

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

O espaço reservado inicial e o texto do botão são armazenados nos pseudo-e elementos CSS. Para personalizá-los, substitua os valores padrão usando o: lang (en) :: depois e: lang (en) :: antes dos seletores, respectivamente. Conteúdo: "Selecione Arquivo ..."; } #customfile .Custom-File-Control: Lang (en) :: antes { Conteúdo: "Clique em mim"; }

2. Recuperando o nome do arquivo selecionado e atualizando a entrada:

Depois que um arquivo for escolhido, seu nome pode ser obtido usando o JavaScript. No entanto, por ser um espaço reservado por um elemento pseudo-elemento, não há maneira direta de manipulá-lo via JavaScript. Em vez disso, crie uma classe CSS adicional para ocultar o espaço reservado assim que um arquivo for selecionado:

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

Após a seleção de arquivos, alterne a classe .Selected no controle .Custom-File usando jQuery para ocultar o espaço reservado e exibir o nome do arquivo:

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

A entrada do arquivo personalizada foi removida no bootstrap 5. Para alterar o texto do espaço reservado, você pode usar o JavaScript ou CSS. Por exemplo:

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})