0

I have to clear the image field after the alert , if the selected img file is not the appropriate size. But now i can see the alert..but when i click on 'ok'(inside the alert),image still retains there itself and i am able to continue with the submit form. but i actually wanted to restrict this when image resolution doesnt satisfy the condition. Please see my code and kindly help.

This is my onFileselect() function

 onFileSelect(fileInput: any,type:any) {
  this.selectedFile = <File>fileInput.target.files[0];
  this.preview(type);  
  this.uploadImage();} #this function will send the file to Apostrophe(CMS backend) and obtain an attachment object.

Preview function:

preview(type) {
// Show preview 
var mimeType = this.selectedFile.type;
if (mimeType.match(/image\/*/) == null) {
  return;
}

var reader = new FileReader();  
const img = new Image();
img.src = window.URL.createObjectURL(this.selectedFile); 
reader.readAsDataURL(this.selectedFile);  
img.onload = (_event) => { 
  const width = img.naturalWidth;
  const height = img.naturalHeight;
  console.log("width = " + width + " height = "+ height)
  switch (type) {
    case "banner":
      this.checkImageResolution(reader, width, height, 1000,562);
      break;
    case "award":
      this.checkImageResolution(reader, width, height, 1000, 1142);
      break;
    case "code":
      this.checkImageResolution(reader, width, height, 1620, 1080);
      break;
    case "video":
      this.checkImageResolution(reader, width, height, 1200, 675);
      break;
    case "post":
      this.checkImageResolution(reader, width, height, 1620, 1080);
      break;  
    case "news":
      this.checkImageResolution(reader, width, height, 1200, 675);
      break;  
    default:
      break;
  }
};}

Resolution checking function:

checkImageResolution(reader: any, width: number, height: number, conditionWidth: number, conditionHeight: number) {
if (width !== conditionWidth && height !== conditionHeight) {
  
  this.selectedFile = null; **#Actually is keeps the file null..but still i can see the file in the image field**
  alert("Image should be of " + conditionWidth + " x " + conditionHeight + " size");
  this.previewUrl = null;
 
} else {
  this.previewUrl = reader.result;
 
}

}

0 Answers0