无法将图像高度和宽度分配给打字稿中的输入类型框

Question

I am trying to get and assign image height and image width to input type text which is hidden in html as below:

Purpose to get height and width to check and validate them.

html:

<input type="file" class="file" #introIcon id="uploadBtn" (change)="onFileChange($event)" name="browseIcon">
<input type="number" class="hidden" id="imgWidth" value="">
<input type="number" class="hidden" id="imgHeight" value="">

ts:

onFileChange(event) {
      if (event.target.files.length > 0) {
        const file = event.target.files[0];
        this.fileName = file.name;
        this.fileType = file.type;
        if(this.fileType == 'image/png' || this.fileType == 'image/jpeg' || this.fileType == 'image/PNG' || this.fileType == 'image/JPEG') {
          const reader = new FileReader();
          reader.onload = e => {
            this.url = reader.result;
            var imageObj = new Image();
            imageObj.src = this.url;
            imageObj.onload = function () {
              console.log('p1:', imageObj.height);
              console.log('p2:', imageObj.width);
              // (<HTMLSelectElement>document.getElementById('imgWidth')).value = imageObj.width;  <-- here getting error
              // (<HTMLSelectElement>document.getElementById('imgHeight')).value = imageObj.height; <-- here getting error
            };
          }
          reader.readAsDataURL(file);
          let fName = (<HTMLSelectElement>document.getElementById('uploadFile')).value;
          fName = this.fileName;
          this.uploadFileName.nativeElement.value = fName;
          this.form.get('browseIcon').setValue(file);
        } else {
          // error
        }
      }
    }

Getting error in below lines:

(<HTMLSelectElement>document.getElementById('imgWidth')).value = imageObj.width;  
(<HTMLSelectElement>document.getElementById('imgHeight')).value = imageObj.height;

Type 'number' is not assignable to type 'string'

I already tried out google but none of the solution worked!

Tried this: Type 'number' is not assignable to type 'string'

Answer 1

How about

(<HTMLSelectElement>document.getElementById('imgWidth')).value = imageObj.width.toString();  
(<HTMLSelectElement>document.getElementById('imgHeight')).value = imageObj.height.toString();