JavaScript: form di upload dei file e nome dei file scelti

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

Dato il seguente form:

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

Possiamo scrivere il seguente codice JavaScript:

(function() {
    const showFileName = inputElement => {
            if(!inputElement || inputElement === null) {
                return;
            }
            const files = inputElement.files;

            if(!files || files.length === 0) {
                return;
            }
            const name = files[0].name;
            const nameElement = document.querySelector(inputElement.dataset.filename);

            if(!nameElement || nameElement === null) {
                return;
            }

           nameElement.textContent = name;
    };

    const handleFileInputs = formSelector => {

        const form = document.querySelector(formSelector);

        if(form !== null) {
            const fileInputs = form.querySelectorAll('input[type="file"]');
            fileInputs.forEach(fileInput => {
                fileInput.addEventListener('change', () => {
                    showName(fileInput);
                }, false);
            });
        }
    };
    document.addEventListener('DOMContentLoaded', () => {
        handleFileInputs('#upload');
    }, false);
})();