How to use getElementsByClassName, onchange and this.value together?

Question

I'm trying to check multiple file upload values for an image type. With this html:

<input type="file" name="image" id="fileUpload">

And this js:

document.getElementById('fileUpload').onchange = function () {

    var filename = this.value;
    var a = filename.split(".");
    if( a.length === 1 || ( a[0] === "" && a.length === 2 ) ) {
        return "";
    }   
    var suffix = a.pop().toLowerCase();
    //if( suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png' && suffix != 'gif' && suffix != 'tiff'){
    if (!(suffix in {jpg:'', jpeg:'', png:'', gif:'', tiff:''})){
        document.getElementById('fileUpload').value = "";
        alert('Please select an image.'); 
    }    
};

Above works fine. But with multiple inputs:

<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">

It will only work on the first. I tried changing to classes and using getElementsByClassName, but that didn't do it and neither did wrapping it in a function and using

<input type="file" name="image" id="fileUpload" onchange="checkForImageType()">

*" I tried changing to classes and using getElementsByClassName, but that didn't do it"*. Show what you tried. You know that you need to iterate the collection in a loop, right? — cookie monster, Apr 02 '14 at 02:29
...and you have a jQuery tag, but don't seem to be using it for some reason. Why? — cookie monster, Apr 02 '14 at 02:30

Arun P Johny · Accepted Answer · 2014-04-02T02:44:33.367

2

You can't have multiple elemetns with the same ID, ID of an element in a document must be unique.

You can use a class to group similar elements then use the class selector.

Since you have used jQuery tag

<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">

then

jQuery(function($){
    var regex = /.\.(jpg|jpeg|png|gif|tiff)$/i;
    $('.fileUpload').change(function () {

        var filename = this.value;
        if (!regex.test(filename)) {
            $(this).replaceWith($(this).clone(true, true));// this.value = "" - does not work with IE
            //see http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery
            alert('Please select an image.');
        }
    });
})

Demo: Fiddle

edited Apr 02 '14 at 02:44

answered Apr 02 '14 at 02:29

Arun P Johny

384,651
66
527
531

1

@cookiemonster yes just fixed it – Arun P Johny Apr 02 '14 at 02:34
Hmm. Have you tested this in Internet Explorer? – raina77ow Apr 02 '14 at 02:34
@raina77ow nope... do you see any problem? – Arun P Johny Apr 02 '14 at 02:35
Well, yes; when I played with similar things, IE really didn't like when input=file value has been changed by the script - after that, the form submission was prevented with `access denied` error. That's why I asked. ) – raina77ow Apr 02 '14 at 02:36
@raina77ow yes... http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery – Arun P Johny Apr 02 '14 at 02:37
Yes, exactly. ) In our project we had to go with replacing the input element. – raina77ow Apr 02 '14 at 02:38
@raina77ow I think http://jsfiddle.net/arunpjohny/t5Dxx/2/ will do enough to please IE – Arun P Johny Apr 02 '14 at 02:43
Thanks. After the if statement i tried `else {console.log('else'); $('#fileInputs').append('');}` to append another input if a successful image but the else doesn't seem to be called. I know thats additional so thanks either way. – Squirrl Apr 02 '14 at 02:51

score 2 · Answer 2 · answered Apr 02 '14 at 02:46

Since id must be unique, you need to use class instead for your input:

<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">

Then you can use document.getElementsByClassName instead of document.getElementById:

var fileUpload = document.getElementsByClassName('fileUpload');

for (var i = 0; i < fileUpload.length; i++) {
    fileUpload[i].onchange = function () {
        var filename = this.value;
        var a = filename.split(".");
        if (a.length === 1 || (a[0] === "" && a.length === 2)) {
            return "";
        }
        var suffix = a.pop().toLowerCase();
        //if( suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png' && suffix != 'gif' && suffix != 'tiff'){
        if (!(suffix in {
            jpg: '',
            jpeg: '',
            png: '',
            gif: '',
            tiff: ''
        })) {
            this.value = "";
            alert('Please select an image.');
        }
    }
}

Fiddle Demo

How to use getElementsByClassName, onchange and this.value together?

2 Answers2