const MAX_SIZE = 0.2e6; // bytes => ~0.2MB

const MAX_SIZE_STR = '0.2MB';

​

const form = document.querySelector('form');

const fileInputs = form.querySelectorAll('[type=file]', form);

const errorWrapper = form.querySelector('[data-error-wrapper]');

const submitButton = form.querySelector('[type=submit]');

const maxSizeMessage = form.querySelector('[data-maxsize-message]');

​

// Display max allowable file size

maxSizeMessage.innerText = maxSizeMessage.innerText

    .replace('{MAX_SIZE}', MAX_SIZE_STR);

​

// listen to all file inputs for new files

[].slice.call(fileInputs)

    .forEach(inp => inp.addEventListener('change', handleFile));

​

function handleFile(e) {

    let files = [].slice.call(this.files);

    // get names and filesizes for all large files

    let largeFiles = files

        .filter(({size}) => size > MAX_SIZE)

        .map(({name, size}) => ({name, size}));

    // if there are large files, show a message and prevent upload

    if  (largeFiles.length) {

        let errors = largeFiles.map(({name, size}) => {

            return `${name} is larger than ${MAX_SIZE_STR}`;

        });

        errorWrapper.innerText = errors.join('\n');

        submitButton.disabled = true;

        // prevent upload by removing input name (restored with valid input)

        this.dataset.name = this.name;

        this.name = '';

    } else {

        errorWrapper.innerText = '';

        submitButton.removeAttribute('disabled');

        // restore input names

        this.name = this.dataset.name;

    }

}