Input field + label change logic not triggered

I am currently trying to replace a Choose a file... span with the filename of the chosen file. It worked before with the following logic. After some js changes and also implementing components, the filename will not be replaced anymore.

Is there any obvious mistake below? Or could it be a layout related problem?

<input type="file" name="filename" id="file-1" class="inputfile inputfile-1"/>
<label for="file-1">
<span class="upload-span">Choose a file... &hellip;</span>
</label>

'use strict';

        ;( function ( document, window, index )
        {
            var inputs = document.querySelectorAll( '#file-1' );
            Array.prototype.forEach.call( inputs, function( input )
            {
                var label    = input.nextElementSibling,
                    labelVal = label.innerHTML;

                input.addEventListener( 'change', function( e )
                {
                    var fileName = '';
                    if( this.files && this.files.length > 1 )
                        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
                    else
                        fileName = e.target.value.split( '\\' ).pop();

                    if( fileName )
                        label.querySelector( 'span' ).innerHTML = fileName;
                    else
                        label.innerHTML = labelVal;
                });

                // Firefox bug fix
                input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
                input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
            });
        }( document, window, 0 ));