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()">

Answer 1

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

Answer 2

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