Validate maximum size of an attachment

Question

Good afternoon, you guys,

I need to validate the maximum size of an attachment but my code is not working, can help me?

Follow the code below:

HTML:

            @using (Html.BeginForm("AdicionarAnexo", "Turma", FormMethod.Post, new { @encoding = "multipart/form-data", @enctype = "multipart/form-data", @id = "AnexoTurmaForm" }))
            {
                <input type="file" name="anexo" id="idAnexo" data-max-size="5" />
                <input type="button" id="adicionarAnexo" value="Incluir anexo" onclick="teste()"/>
            }

JAVASCRIPT:

function teste() {
    var fileInput = $('#idAnexo');
    var maxSize = fileInput.data('data-max-size');
    $('#AnexoTurmaForm').button(function (e) {
        if (fileInput.get(0).files.length) {
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if (fileSize > maxSize) {
                alert('file size is more then' + maxSize + ' bytes');
                return false;
            } else {
                alert('file size is correct- ' + fileSize + ' bytes');
            }
        } else {
            alert('choose file, please');
            return false;
        }

    });
};

Answer 1

You can simply use the event .change() and verify that it has a value greater than the data-max-size. That would be your code:

    <script>
    $(function () {
        $("input:file").change(function () {//ou Id do input 
            var fileInput = $(this);
            var maxSize = $(this).data('max-size');
            console.log(fileInput.get(0).files[0].size);

            //aqui a sua função normal
            if (fileInput.get(0).files.length) {
                var fileSize = fileInput.get(0).files[0].size; // in bytes
                if (fileSize > maxSize) {
                    alert('file size is more then' + maxSize + ' bytes');
                    return false;
                } else {
                    alert('file size is correct- ' + fileSize + ' bytes');
                }
            } else {
                alert('choose file, please');
                return false;
            }
        });
    });
</script>

See an example on Jsfiddle.

If you want the event at the click of the button, just change to it:

<script>
  $(function () {
            $("#adicionarAnexo").click(function () {
                var fileInput = $('#idAnexo');
                var maxSize = $('#idAnexo').data('max-size');
                console.log(fileInput.get(0).files[0].size);

                //aqui a sua função normal
                if (fileInput.get(0).files.length) {
                    var fileSize = fileInput.get(0).files[0].size; // in bytes
                    if (fileSize > maxSize) {
                        alert('file size is more then' + maxSize + ' bytes');
                        return false;
                    } else {
                        alert('file size is correct- ' + fileSize + ' bytes');
                    }
                } else {
                    alert('choose file, please');
                    return false;
                }
            });
        });
</script>

See the example on Jsfiddle.