Hello Uploadcare community!
I have a validation working, I have tested out and everything works. My validation has three parts, height and width restrictions and DPI restrictions. When I upload something that breaks the validation it used to appear the Errores messages that I descripted but not anymore.
That is my JS code:
<script>
function maxDimensions(width, height) {
return function(fileInfo) {
var imageInfo = fileInfo.originalImageInfo
if (imageInfo === null) {
return
}
var heightExceeded = height && imageInfo.height < (height-10)
if (width && imageInfo.width < (width-10)) {
if (heightExceeded) {
throw new Error('maxDimensions')
}
else {
throw new Error('maxWidth')
}
}
if (heightExceeded) {
throw new Error('maxHeight')
}
var heightExceeded2 = height && imageInfo.height > (height+10)
if (width && imageInfo.width > (width+10)) {
if (heightExceeded2) {
throw new Error('maxDimensions')
}
else {
throw new Error('maxWidth')
}
}
if (heightExceeded2) {
throw new Error('maxHeight')
}
}
}
function minDpi(dpi) {
return function(fileInfo) {
var imageInfo = fileInfo.originalImageInfo;
if (imageInfo === null) {
return;
}
console.log(imageInfo.dpi[0] || null);
if (imageInfo.dpi[0] < (dpi-10)) {
throw new Error("dpiError");
}
if (imageInfo.dpi[0] > (dpi+10)) {
throw new Error("dpiError");
}
}
}
$(function() {
$('[role=uploadcare-uploader]').each(function() {
var input = $(this)
if (!input.data('maxWidth') && !input.data('maxHeight')) {
return
}
var widget = uploadcare.Widget(input)
widget.validators.push(maxDimensions(input.data('maxWidth'), input.data('maxHeight')))
widget.validators.push(minDpi(input.data('dpi')));
})
})
UPLOADCARE_LOCALE_TRANSLATIONS = {
// messages for widget
errors: {
maxDimensions: 'This image does not match the required dimensions',
maxWidth: 'This image does not match the width required.',
maxHeight: 'This image does not match the height required.',
dpiError: 'This image does not match the DPI required.',
},
// messages for dialog’s error page
dialog: {
tabs: {
preview: {
error: {
'maxDimensions': {
title: 'ERROR',
text: 'This image does not match the required dimensions',
back: 'Please try again',
},
'maxWidth': {
title: 'ERROR',
text: 'This image does not match the width required.',
back: 'Please try again',
},
'maxHeight': {
title: 'ERROR',
text: 'This image does not match the height required.',
back: 'Please try again',
},
'dpiError': {
title: 'ERROR',
text: 'This image does not match the DPI required.',
back: 'Please try again',
},
},
},
},
},
}
</script>
<script>
UPLOADCARE_LOCALE_TRANSLATIONS = {
buttons: {
choose: {
files: {
one: 'Upload',
other: 'Upload'
},
images: {
one: 'Upload',
other: 'Upload'
}
}
}
};
</script>
This is the HTML code:
<input
type="hidden"
role="uploadcare-uploader"
data-images-only="true"
data-max-width="590"
data-max-height="786"
data-dpi="72"
name="Stock 1"
/>
I don’t know what’s wrong, is there someone that can sort this out? The validation works fine though