Validation on Uploaded Image Size using Angular 5

Question

I'm currently working on an angular web app, and of the features is the photo upload.

I would like to implement validation on the image size so that I can throw errors if the image is too small.

Here is my code:

public onImageDrop(evt: any) {
  evt.stopPropagation();
  evt.preventDefault();
  this.croppieImage = null;
  this.onCropeMode = true;
  const image: HTMLImageElement = new Image();
  const file: File = evt.dataTransfer.files[0];
  const myReader: FileReader = new FileReader();

  myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;
  });

  myReader.readAsDataURL(file);
  **console.log(image.height);
  console.log(image.width);**
  this.photoInDragMode = false;
  this.uplodedPhotoFileName = file.name;
  this.uplodedPhotoFileMimeType = file.type;
  this.showPhotoSaveButton = true;
  this.onCropeMode = true;
}

The problem I have is that the

    console.log(image.height);
    console.log(image.width);

Always shows me

> 0
> 0

I really appreciate if anyone can help.

Thanks in advance guys.

CJ Ramki · Accepted Answer · 2020-05-25 12:32:49Z

4

HTML

<input type='file'
       formControlName="img_name"
       class="form-control"
       (change)="readUrl($event)">

TS

readUrl(event: any) {
    if (event.target.files && event.target.files[0]) {

  if (event.target.files[0].type === 'image/jpeg' || 
      event.target.files[0].type === 'image/png' || 
      event.target.files[0].type ==='image/jpg') {
    if (event.target.files[0].size < 200 * 200) {/* Checking height * width*/ }
      if (event.target.files[0].size < 2000000) {/* checking size here - 2MB */ }
  }
}

edited May 25, 2020 at 12:32

CJ Ramki

2,6323 gold badges27 silver badges47 bronze badges

answered Aug 28, 2018 at 10:30

Sangeeth John

3301 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Buchmiller Over a year ago

Image resolution is not tied directly to file size. The size property only indicates the number of bytes in the file.

fransyozef · Accepted Answer · 2018-08-27 15:30:38Z

2

You get 0 because the image was not loaded yet when you place the console logs. It's loaded in

myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;
  });

so you can do something like

myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;


  });

image.onload = function(){
  // image  has been loaded
console.log(image.height);
};

edited Aug 27, 2018 at 15:30

answered Aug 27, 2018 at 14:55

fransyozef

5742 gold badges8 silver badges18 bronze badges

3 Comments

DevMachine Over a year ago

Hi @fransyozef, thanks for your quick reply, I actually tried that thing earlier, but I get the TypeError: Cannot read property 'height' of null

fransyozef Over a year ago

stackoverflow.com/questions/3511200/…

fransyozef Over a year ago

I've edit my solution with an onload event on the image var

Chellappan வ · Accepted Answer · 2018-08-27 15:18:33Z

1

Try This

 reader.onload = (event) => { 
        var img = new Image;
        this.url = event.target.result;
        img.src = event.target.result;
        console.log(img.width);
      }

Example:https://stackblitz.com/edit/angular-file-upload-preview-yxuayc

answered Aug 27, 2018 at 15:18

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Collectives™ on Stack Overflow

Validation on Uploaded Image Size using Angular 5

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related