Get width and height of image with ng2-file-upload

Question

I want to get and check the width and height of an uploaded image using ng2-file-upload and Angular 6.

My code so far is:

constructor() {
    this.uploader = this.initializeUploader("url");
}

public uploader;


private initializeUploader(url: string): FileUploader {
    const uploadOptions: FileUploaderOptions = {
        allowedMimeType: ['image/jpeg', 'image/png' ],

    }
    const uploader = new FileUploader(uploadOptions);

    uploader.onAfterAddingFile = item => {
        console.log(item);
        //Want to get width here
    }

    return uploader;
}

and the HTML:

<input type="file" ng2FileSelect [uploader]="uploader" />

I was looking for solutions but nothing worked for me. Found the idea to use

Upload.imageDimensions(file).then()

here. But i don't understand how/where to import 'Upload'. Also found the solution to add

ngf-min-height="1"

in the input-element but i can't find where i can "catch" the error, if the size of the input image is wrong.

score 2 · Accepted Answer · answered Dec 07 '18 at 09:26

Transform your file to a base64, and create an image with that base as the source. During the load hook, you can get the size of the image. Here is a working snippet !

function change() {
  const input = document.querySelector('input');
  const file = input.files[0];
  
  getBase64(file).then(base64 => {
    const img = new Image();
    img.onload = () => console.log(img.width, img.height);
    img.src = base64;
  });
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

<input type="file" onchange="change()">

I get for 'function': Unexpected token. A constructor, method, accessor, or property was expected. So i changed it to 'public'. also i put a "this" in front of getBase64(... so i have this.getBase64(... in the line img.src = base64 i get the error: "[ts] Type '{}' is not assignable to type 'string'." Dont know how to solve this. if i comment it out, the code runs but does not output the width and height — SAM, Dec 07 '18 at 09:49

score 0 · Answer 2 · answered Dec 07 '18 at 10:22

Finally i got this working with some changes of the post of trichetriche:

    public change() {
    const input = document.querySelector('input');
    const file = input.files[0];

    this.getBase64(file).then(base64 => {
      const img = new Image();
      img.onload = () => console.log(img.width, img.height);
      img.src = base64.toString();
    });
  }

  public getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }

and html:

 <input type="file" (change)="change()">

Get width and height of image with ng2-file-upload

2 Answers2