function readImage (file) { function not working
I have the following script that should check the width and height of a selected image file.
The issue I am having is when the script runs it does not execute the code inside the function readImage (file) { function which should check the image file dimensions, execute the if statement and display an alert.
Where have I gone wrong?
<input type='file' id="OverrideWayfinderBrowse" name="OverrideWayfinderBrowse" class="input-field" onChange="validateOverrideWayfinderBrowse(this);"/>
<div id="OverrideWayfinderPreview"><img class="OverrideWayfinderPreview"/></div>
function validateOverrideWayfinderBrowse(input){
window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("OverrideWayfinderBrowse"),
elPreview = document.getElementById("OverrideWayfinderPreview"),
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL
console.log("OVERRIDE WAYFINDER IMAGE PREVIEW",elPreview);
function readImage (file) {
console.log("IMAGE READ");
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.addEventListener("load", function () {
if(image.height >= 390) {
console.log("OVERRIDE WAYFINDER IMAGE SIZE",image.height);
var imageInfo = '<br /><br />Your selected image size is correct<br /> Display width ' +
image.width + ',px <br /> Display height ' +
image.height + 'px ' + '';
elPreview.appendChild( this );
elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br />');
} else if(image.height <= 390) {
console.log("ELSE");
$.alert({
type: 'red',
title: 'Image select error!',
content: 'The wayfinder image you have seleted is incorrect, ' + image.width + ' by ' + image.height + '.<br/><br/> Please resize your image to a miniumn height of 390px.<br/><br/>Resizing upwards reduces the quality of the image. Start with a large image and resize downwards.<br/><br/>For help read section 1.5 in the knowledgebase',
icon: 'fa fa-rocket',
animation: 'zoom',
boxWidth: '50%',
closeAnimation: 'zoom',
buttons: {
okay: {
text: 'Try again',
btnClass: 'btn-blue'
}
}
});
}
});
image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
if (useBlob) {
window.URL.revokeObjectURL(file);
}
});
reader.readAsDataURL(file);
}
elBrowse.addEventListener("change", function() {
var files = this.files;
var errors = "";
if (!files) {
errors += "File upload not supported by your browser.";
}
if (files && files[0]) {
for(var i=0; i<files.length; i++) {
var file = files[i];
if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
readImage( file );
} else {
errors += file.name +" Unsupported Image extension\n";
}
}
}
if (errors) {
alert(errors);
}
});
};
As mentioned by @Lennholm, you are binding the change event incorrectly.
- You bind a change event directly to the element here
onChange="validateOverrideWayfinderBrowse(this);"
but you've also added a change event listener inside the function which will never run because the event has already happened
elBrowse.addEventListener("change", function() {};
- You also pass the input element into the function and never use it.
What you need to do is move the code from inside the nested event listener, and put it directly inside your function while reading the file from the input parameter. Give it a try.
function validateOverrideWayfinderBrowse(input) {
window.URL = window.URL || window.webkitURL;
elPreview = document.getElementById("OverrideWayfinderPreview");
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL
console.log("OVERRIDE WAYFINDER IMAGE PREVIEW", elPreview);
function readImage(file) {
console.log("IMAGE READ");
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.addEventListener("load", function() {
if (image.height >= 390) {
console.log("OVERRIDE WAYFINDER IMAGE SIZE", image.height);
var imageInfo = '<br /><br />Your selected image size is correct<br /> Display width ' +
image.width + ',px <br /> Display height ' +
image.height + 'px ' + '';
elPreview.appendChild(this);
elPreview.insertAdjacentHTML("beforeend", imageInfo + '<br />');
} else if (image.height <= 390) {
console.log("ELSE");
$.alert({
type: 'red',
title: 'Image select error!',
content: 'The wayfinder image you have seleted is incorrect, ' + image.width + ' by ' + image.height + '.<br/><br/> Please resize your image to a miniumn height of 390px.<br/><br/>Resizing upwards reduces the quality of the image. Start with a large image and resize downwards.<br/><br/>For help read section 1.5 in the knowledgebase',
icon: 'fa fa-rocket',
animation: 'zoom',
boxWidth: '50%',
closeAnimation: 'zoom',
buttons: {
okay: {
text: 'Try again',
btnClass: 'btn-blue'
}
}
});
}
});
image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
if (useBlob) {
window.URL.revokeObjectURL(file);
}
});
reader.readAsDataURL(file);
}
// use the input element you passed instead of "this" here
var files = input.files;
var errors = "";
if (!files) {
errors += "File upload not supported by your browser.";
}
if (files && files[0]) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) {
readImage(file);
} else {
errors += file.name + " Unsupported Image extension\n";
}
}
}
if (errors) {
alert(errors);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<input type='file' id="OverrideWayfinderBrowse" name="OverrideWayfinderBrowse" class="input-field" onChange="validateOverrideWayfinderBrowse(this);" />
<div id="OverrideWayfinderPreview"><img class="OverrideWayfinderPreview" /></div>