JavaScript: mostrare il nome di un file scelto per l'upload senza usare jQuery

In JavaScript è semplice mostrare il nome di un file scelto per l'upload senza usare jQuery.

Dato il seguente form:

<form action="" method="post" enctype="multipart/form-data">
  <div>
    <span class="file">
        <input type="file" name="file">
    </span>
    <span class="file-name"></span>
    <input type="submit" value="Upload">
  </div>      
</form>

Possiamo scrivere il seguente codice JavaScript:

(function() {
    var handleFileInputs = function(selector) {
        var form = document.querySelector(selector);
        var showName = function(el) {
            var name = el.files[0].name;
            el.parentNode.nextElementSibling.innerHTML = name;
        };
        if(form !== null) {
            var inputs = form.querySelectorAll('input[type="file"]');
            for(var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                input.addEventListener('change', function() {
                    showName(this);
                });
            }
        }
    };
    document.addEventListener('DOMContentLoaded', function() {
        handleFileInputs('#upload');
    });
})();