Count empty file upload controls

Question

In a dynamically generated set of file upload controls:

<input type="file" name="archivos[]">
<input type="file" name="archivos[]">
<input type="file" name="archivos[]">
// ...

... I can easily count the non-empty ones:

// Works fine
var nonEmptyCount = $("input[type='file'][name='archivos[]'][value!='']").length;

However, when I try to count the empty ones (what I actually need) the selector never matches anything:

// Always zero
var emptyCount = $("input[type='file'][name='archivos[]'][value='']").length;

I can't believe I need this cumbersome code:

// Works but ugly
var emptyCount = $("input[type='file'][name='archivos[]']").length -
    $("input[type='file'][name='archivos[]'][value!='']").length;

What bit am I missing?

Alex Char · Accepted Answer · 2014-12-05 09:56:14Z

2

One solution is to check if value is empty inside an iterator like:

$("#findEmpty").on("click", function() {
  var count = 0;
  $(":file[name='archivos[]']").each(function() {
    if (this.value == "") {
      count++;
    }
  });
  alert(count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="archivos[]" />
<input type="file" name="archivos[]" />
<input type="file" name="archivos[]" />
<input type="file" name="archivos[]" />
<input type="file" name="archivos[]" />
<input type="file" name="archivos[]" />
<input type='button' value='Check Empty' id='findEmpty' />

edited Dec 5, 2014 at 9:56

answered Dec 5, 2014 at 9:47

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Álvaro González Over a year ago

Funny... The important bit seems to be using :file instead of [type='file']. With that little change, my original code seems to work as expected :-?

Álvaro González Over a year ago

Whatever, .val() returns «the current value of the first element in the set».

Ehsan Sajjad · Accepted Answer · 2014-12-05 09:55:16Z

0

You can filter them this way:

var emptyOne = $("input[type='file'][name='archivos[]']").filter(function () {
        return $(this).val() == "";
    });

$(function () {

    var emptyOne = $("input[type='file'][name='archivos[]']").filter(function () {
        return $(this).val() == "";
    });

    alert(emptyOne.length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="file" name="archivos[]">
<input type="file" name="archivos[]">
<input type="file" name="archivos[]">

EXAMPLE FIDDLE

answered Dec 5, 2014 at 9:55

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Comments

Álvaro González · Accepted Answer · 2014-12-05 10:06:39Z

0

I don't have an explanation (and I'll immediately accept any answer that provides one) but the root cause seems to be using the generic attribute equals selector to find the controls:

$("input[type='file']")

If I use the jQuery extension short-cut, everything else works as expected:

$("input:file")

As per the docs:

Both selectors should behave identically
[type='file'] should perform better

... so there must be a bug somewhere.

answered Dec 5, 2014 at 10:06

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Collectives™ on Stack Overflow

Count empty file upload controls

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related