Created
February 16, 2022 14:06
-
-
Save mohas/711c151e81a67edd35bd9c332a16cc9d to your computer and use it in GitHub Desktop.
Validate html file input with image width and height, uses jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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() | |
} | |
}; | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment