Validate html file input with image width and height, uses jquery

index.html

<form class="form-horizontal" validate-files method="post" action="/pics" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-4">file 1</label>
        <div class="col-sm-7">
            <input type="file" class="form-control" name="pic1" accept=".jpg" accept-width="300" accept-height="350" />
            <div class="helper-block">jpg and 300x350</div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-4">file 2</label>
        <div class="col-sm-7">
            <input type="file" class="form-control" name="pic2" accept=".jpg" accept-width="300" accept-height="350" />
            <div class="helper-block">jpg and 300x350</div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-sm col-sm-1"><i class="icon-floppy-disk"></i></button>
</form>

index.js

$(function () {
    window.URL = window.URL || window.webkitURL;

    $("form[validate-files]").submit(async function (e) {
        var form = this;
        e.preventDefault(); //Stop the submit for now
        //Replace with your selector to find the file input in your form
        const fileInputs = $(this).find("input[type=file]").get()

        let checks = []

        for (const fileInput of fileInputs) {
          const p = checkImageWidthHeight(fileInput)
          checks.push(p)
        }

        Promise.all(checks).then(function () {
          form.submit();
        })
    });
})

function checkImageWidthHeight(fileInput) {
    const $input = $(fileInput)
    const file = fileInput.files && fileInput.files[0]
    if (!file) return Promise.resolve()

    return new Promise(function (resolve, reject) {
        const img = new Image();

        img.src = window.URL.createObjectURL(file);
        img.onload = function () {
            const width = img.naturalWidth
            const height = img.naturalHeight
            window.URL.revokeObjectURL(img.src)

            const acceptWidth = $input.attr('accept-width')
            const acceptHeight = $input.attr('accept-height')
            const acceptExt = $input.attr('accept')

            let helper = $input.parent().find('.helper-block')
            if (width === Number(acceptWidth) && height === Number(acceptHeight)) {
                helper.removeClass('text-danger')
                if (helper.attr('original-text'))
                    helper.text(helper.attr('original-text'))
                else
                    helper.remove()
                resolve()
            }
            else {
                if (helper.length === 0) {
                    helper = $('<div />')
                    helper.addClass('helper-block')
                    $input.parent().append(helper)
                }
                if (!helper.attr('original-text'))
                    helper.attr('original-text', helper.text())
                helper.addClass('text-danger')
                helper.text(`File should be ${acceptExt} and ${acceptWidth}x${acceptHeight}`)
                reject()
            }
        };
    })
}