Hello,
I want to check image resolution before an image is uploaded to the server, but I am having trouble with obtaining the image file. I use the gform_file_upload_markup filter and grab up.files which returns a file list, but when I try to use Javascript’s FileReader api to get image dimensions I cannot. The error is: “Uncaught TypeError: Failed to execute ‘readAsDataURL’ on ‘FileReader’: parameter 1 is not of type ‘Blob’.” and parameter 1 is a file in the file list.
Here is my code:
gform.addFilter( 'gform_file_upload_markup', function( html, file, up, strings, imagesUrl, response ) {
if(up.files){
console.log(file);
console.log(up.files);
console.log(typeof(file));
for (let i = 0; i < up.files.length; i++) {
const file = up.files[i];
console.log(file);
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
const image = new Image();
image.src = e.target.result;
image.onload = function () {
var width = this.width;
var height = this.height;
const filesize = Math.round((size / 1024));
console.log("The width is: " + width);
console.log("The height is: " + height);
console.log("The size is: "+ size);
}
}
}
}
})