JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<form method="post" action="">
	<input type="hidden" id="n_images" name="n_images" value="">
	<input type="file" name="images" class="upload_images" accept=".gif, .png, .jpg, .jpeg" multiple data-min_width="500">
</form>

JavaScript

$(document).ready(function () {
    function check_image_dimensions ($this, image, img_name) {

        let min_width = + $this.data('min_width');
        if (typeof(min_width) === "number" && image.width < min_width) {
            alert(`Error loading photo ${img_name}, image width: ${image.width}px is less then minimal: ${min_width}px.`);
            return false;
        }

        return true;
    }

    function unknown_error () {
        alert('Unknown error while loading image.');
    }

	$(document).on('change', '.upload_images', function() {
        var $this = $(this);
        let images = $this.prop('files');
        if (typeof(images) === 'undefined' || images.length === 0) {
		    return false;
        }

        let good_images = Array();
        let promises = Array();
        for (let i = 0; i < images.length; i++) {
            let promise = new Promise(function(resolve, reject) {
                const reader = new FileReader();
                reader.onload = resolve;
                reader.readAsDataURL(images[i]);
            });

			promise.then((event) => {
				const img  = new Image();
				img.onload = () => {
					if(check_image_dimensions($this, img, images[i].name) === true) {
						good_images.push(i);
				  	}
			  	};

			  	img.onerror = unknown_error;
			  	img.src = event.target.result;
			  	return i;
		  	}).catch(() => alert('Unknown error'));

            promises.push(promise);
        }

        Promise.all(promises).then((values) => {
            alert(good_images);
        });
	});
});