Each input="file" Jquery does not validate

Question

I have the following code on the form:

   <div class="form-group ">
            <small id="small-alert-pic">Máximo de 7 fotos</small>
            <small id="picture-size"></small>
            <input type="file" name="files[]" class="form-control"
            multiple="multiple" placeholder="" id="picture">
   </div>

When I perform the selection of the files I have the quantity validation( that works normally ):

    $("#picture").on("change", function () {
        if ($("#picture")[0].files.length > 7) {
            $(this).css('boder', '3px solid red');
            $('#small-alert-pic').css('color', 'red')
            $('#small-alert-pic').text('ATENÇÃO! SÃO PERMITIDOS APENAS 7 FOTOS PARA UPLOAD');
        }
    });

however when I do the file size validation occurs it only validates the first one. If I select a file of 1kb and one of 19MB( in this order) it does not validate the second, however if I select the 19MB and the 1KB it validates normally. Follows the code:

 $('#picture').change(function(){
        var isOk = true;
        var maxSize = parseInt(2048, 10)
        $('input[type=file]').each(function () {
            if (typeof this.files[0] !== 'undefined') {
                var size = this.files[0].size;
                console.log(size / 1000 + ' -- ' + maxSize);
                isOk = maxSize > (size / 1000);
                if (!isOk) {
                    $('#picture-size').prev().css({
                        "color": " red"
                    }).text('ATENÇÃO SÃO PERMITIDOS CADA ARQUIVO DEVE POSSUIR APENAS 2MB');
                } else {
                    $(this).prev().css({
                        "border": "none"
                    });
                }
                return isOk;
            }
        });
        return isOk;
    });

Does anyone have any idea what might be going on?

Answer 1

Note that I’ve found out about the file array.

The problem, apparently, is here: var size = this.files[0].size;.
See: with this, you only get the first file. And you must validate in all files, not only for the first.

Try the following:

$("#picture").on("change", function() {
  if ($("#picture")[0].files.length > 7) {
    $(this).css('boder', '3px solid red');
    $('#small-alert-pic').css('color', 'red')
    $('#small-alert-pic').text('ATENÇÃO! SÃO PERMITIDOS APENAS 7 FOTOS PARA UPLOAD');
  }
});

$('#picture').change(function() {

  //console.clear();

  var isOk = true;

  var maxSize = parseInt(2048, 10);

  $('input[type=file]').each(function() {

    var files = this.files;

    for (let i = 0; i < files.length; i++) {

      if (typeof this.files[i] !== 'undefined') {

        var size = parseInt(this.files[i].size);

        console.log(size);

        console.log(size / 1000 + ' -- ' + maxSize);

        isOk = maxSize > (size / 1000);

        if (!isOk) {
          $('#picture-size').prev().css({
            "color": " red"
          }).text('ATENÇÃO SÃO PERMITIDOS CADA ARQUIVO DEVE POSSUIR APENAS 2MB');
        } else {
          $(this).prev().css({
            "border": "none"
          });
        }
      }

      return isOk;

    }
  });
  return isOk;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group ">
  <small id="small-alert-pic">Máximo de 7 fotos</small>
  <small id="picture-size"></small>
  <input type="file" name="files[]" class="form-control" multiple="multiple" placeholder="" id="picture">
</div>