Alterando o texto ou ícone padrão de upload de arquivos.

De onde vem os textos.

O texto e formato de um “input file”, depende de cada navegador. Eles tem sua própria versão do controle e, como tal, você não pode alterar o texto ou a orientação do diretamente no HTML.

Existem alguns “tipos de hacks” que você pode querer tentar se quiser (incluindo silverlight e flash), eu prefiro a solução usando jQuery, que montei para atender a minha necessidade.

Identificando o problema

O que eu preciso é mudar o padrão no botão que é “Choose File” (no meu navegador) para um ícone de upload.
Isso quando estou usando um “input file”.
Por diversas razões que não cabe a este artigo, deixa com o padrão do navegador do usuário não era opcional.

Entrando no código

A primeira coisa que eu fiz foi esconder o type=”file” e ancora-lo pelo id com o input do ícone de minha escolha (neste caso, uma seta para cima) que se encontra dentro de < label > .

Mas com isso, o campo onde deve ser exibido o nome do arquivo também foi removido, então adicionei um type=”text” com a propriedade readonly=”readonly” para exibir o nome do arquivo. Deixei como readonly=”readonly” pois o nome do arquivo não pode ser alterado neste momento. Mantendo assim o comportamento esperado de um type=”file”

Por fim criei um javascript para poder identificar quando um arquivo é selecionado e adicionar o nome deste arquivo no type=”text” sitado acima. Aqui fiz uso do jQuery para facilitar a manipulação dos dados.

Segue o HTML

                        <form class="form-inline">
                    <input id="file_upload" name="name_upload" type="file"  style="display: none;" />
                    <div class="form-group">
                        <label for="file_upload">
                            <img src="http://leandrolisura.com.br/wp-content/uploads/2018/09/upload-1.png" />
                        </label>
                        <input type="text" id="file_file_name" class="form-control" placeholder="File Name" readonly="readonly">
                    </div>
                    <button type="submit" id="submit_button" class="btn btn-default">Send File</button>
                </form> 

Segue o Javascript

                $("#file_upload").change(function () {
                    if ($('#file_upload')[0].files[0] !== undefined) {
                        var nome_arquivo = $('#file_upload')[0].files[0].name;
                        $('#file_file_name').val(nome_arquivo);
                    }else{
                        $('#file_file_name').val('');
                    }
                });

Fazendo um exemplo mais didático

Aqui eu fiz uma montagem completa para deixar de exemplo, assim como em outros artigos, estou usando o bootstrap e jQuery.

Este exemplo não faz o envio do upload, somente mostra como alterar o ícone. Para demonstrar que esta funcionando corretamente, usei parte da logica que se encontrar em outro artigo que escrevi e pode ser visto no link Realizando o tratamento no upload de arquivo usando JS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>File Size</title>
        <!-- Bootstrap core CSS -->
        <link href="http://leandrolisura.com.br/wp-content/uploads/2017/11/bootstrap.min_.css" rel="stylesheet">
        <style type="text/css">
            body { padding-top: 50px; }
            .starter-template { padding: 40px 15px;text-align: center; }
            .margin-top {margin-top: 10px;}
        </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Leandro Lisura</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Change icon JS</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">
            <div class="starter-template">
                <h1>File input with custom icon</h1>
                <form class="form-inline">
                    <input id="file_upload" name="name_upload" type="file"  style="display: none;" />
                    <div class="form-group">
                        <label for="file_upload">
                            <img src="http://leandrolisura.com.br/wp-content/uploads/2018/09/upload-1.png" />
                        </label>
                        <input type="text" id="file_file_name" class="form-control" placeholder="File Name" readonly="readonly">
                    </div>
                    <button type="submit" id="submit_button" class="btn btn-default">Send File</button>
                </form>
                <div class="row margin-top" >
                    <div class="col-md-4 col-md-offset-4">
                        <ul class="list-group" style="text-align: left;">
                            <li class="list-group-item"><strong>Name:</strong> <span id="list_group_span_name"></span></li>
                            <li class="list-group-item"><strong>Size:</strong> <span id="list_group_span_size"></span></li>
                            <li class="list-group-item"><strong>Type:</strong> <span id="list_group_span_type"></span></li>
                            <li class="list-group-item"><strong>Extension</strong> <span id="list_group_span_ext"></span></li>
                            <li class="list-group-item"><strong>Last Modified Date:</strong> <span id="list_group_span_modified"></span></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->
        <!-- Bootstrap core JavaScript -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="http://leandrolisura.com.br/wp-content/uploads/2017/11/jquery.min_.js"></script>
        <script src="http://leandrolisura.com.br/wp-content/uploads/2017/11/bootstrap.min_.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $("#file_upload").change(function () {
                    if ($('#file_upload')[0].files[0] !== undefined) {
                        var nome_arquivo = $('#file_upload')[0].files[0].name;
                        $('#file_file_name').val(nome_arquivo);
                    }else{
                        $('#file_file_name').val('');
                    }
                });

                $("#submit_button").click(function () {
                    var fileInput = $('#file_upload'); // => Gets the file data
                    if (fileInput.get(0).files.length) { // => Check if there is a file
                        var filename = fileInput.get(0).files[0].name; // => Gets the file name
                        $("#list_group_span_name").html(filename);
                        $("#list_group_span_size").html(fileInput.get(0).files[0].size + ' bytes');
                        $("#list_group_span_type").html(fileInput.get(0).files[0].type);
                        $("#list_group_span_ext").html(filename.split('.').pop());
                        $("#list_group_span_modified").html(fileInput.get(0).files[0].lastModifiedDate);
                        return false; // => This "return false" is just becase i dont want to send de request
                    }
                });
            });
        </script>
    </body>
</html>

A ideia é simples e provavelmente é apenas parte de uma solução maior, mas é bem funcional e me ajudou em vários projetos.

Qualquer dúvida ou dicas, entre em contato: leandrolt@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *