Realizando o tratamento no upload de arquivo usando JS

Acredito que a maioria de dos desenvolvedores já enfrentou o seguinte problema. “Como fazer tratamento no upload de arquivos no JavaScript?

É possível realizar diversas verificações em seus arquivos antes de realizar o upload para sua aplicação. Existe dentro de um formulário HTML uma maneira simples; usando funções Javascript e jQuery.

Apensa um aviso antes de continuar:
“”Aviso: não deixe de realizar as validações em backend, este procedimento é fundamental para garantir a segurança de sua aplicação””

Validando seu arquivo.

Neste exemplo que montei para demonstração coloquei somente uma validação. O tamanho do aquivo não pode ser maior que 500KB.
Outras validações podem ser facilmente adicionadas posteriormente, tentei deixar o exemplo o mais simples possível.

Gostos de publicar a solução completa, pois se quiser realizar o teste em sua maquina, fica mais fácil, basta criar um arquivo “.html” e abrir em seu navegador para ver a solução funcionando.

Segue o código com explicações abaixo.

<!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; }
        </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="#">File Size JS</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">
            <div class="starter-template">
                <h1>File input</h1>
                <div class="row">
                    <div class="col-md-4 col-md-offset-2">
                        <form>
                            <div class="form-group">
                                <label for="file_sample"></label>
                                <input type="file" id="file_input">
                            </div>
                            <p>Max size: 500kb</p>
                            <button type="submit" id="submit_button" class="btn btn-default">Submit to file data</button>
                        </form>
                    </div>
                    <div class="col-md-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 id="div_row_error" class="alert alert-danger" role="alert"><strong>Oh snap!</strong> <span id="div_alert_span_error"></span></div>
                        <div id="div_row_success" class="alert alert-success" role="alert"><strong>Well done!</strong> <span id="div_alert_span_success"></span></div>
                    </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 () {
                $('#div_row_success').hide();
                $('#div_row_error').hide();
                max_size_file = 500000; // => MAX File size
                // => Every time you change file on form
                $("input:file").change(function () {
                    var fileInput = $(this); // => Gets the file data
                    if (fileInput.get(0).files.length) { // => Check if there is a file
                        var fileSize = fileInput.get(0).files[0].size; // => Value in bytes
                        if (fileSize > max_size_file) { // => Check if the file size is bigger tham MAX
                            alertErrorShow('Your file size is bigger then ' + max_size_file + ' KB');
                            return false; // => Ends action
                        } else {
                            alertSuccessShow('Great Job');
                            return false; // => Ends action
                        }
                    } else {
                        alertErrorShow('You have to choose one file');
                        return false; // => Ends action
                    }
                });

                // => Execute on click submit buttom
                $("#submit_button").click(function () {
                    var fileInput = $('#file_input'); // => 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
                    } else {
                        alertErrorShow('You have to choose one file');
                        return false; // => Ends action
                    }
                });
            });

            // => Just show alerts
            function alertErrorShow(message) {
                $('#div_row_success').hide();
                $('#div_alert_span_error').html(message);
                $('#div_row_error').show();
            }

            // => Just show alerts
            function alertSuccessShow(message) {
                $('#div_row_error').hide();
                $('#div_alert_span_success').html(message);
                $('#div_row_success').show();
            }
        </script>
    </body>
</html>

Rodei o arquivo, e agora?

Ao executar este código e anexar um arquivo, você vai chegar uma tela muito próxima a esta abaixo.

Pontos de atenção

$(“input:file”).change(function () {});

– para cada alteração de arquivo o JS vai verificar se o tamanho do arquivo adicionar é maior que o definido em minha aplicação.

$(“#submit_button”).click(function () {});

– Ao clicar no submit é executado este código que realiza exibe uma serie de informações sobre o arquivo anexado.

$(‘#file_input’).get(0).files[0]

– fornece os dados do arquivo anexado.

return false;

– dentro do $(“#submit_button”).click(function () {}); sempre retorna false para que ele não realize a função de submit. Como é um exemplo, deixei assim somente para ficar mais didático. Em um ambiente real, ao realizar as validações o botão deve efetivamente, enviar o formulário.

Acredito que esta é uma maneira simples para realizar as validações de seus arquivos antes mesmo de enviar para o servidor.

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

Referencia:
Para este artigo, adaptei usando as seguintes postagens.
How Can I Get File Extensions With Javascript

Validar Tamanho Maximo De Um Anexo

Leave a Reply

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