My goal is to retrieve and assign the height and width of an image to hidden text inputs in HTML, as shown below:
The purpose is to obtain the height and width for validation.
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
}
}
}
Error occurs in the following lines:
(<HTMLSelectElement>document.getElementById('imgWidth')).value = imageObj.width;
(<HTMLSelectElement>document.getElementById('imgHeight')).value = imageObj.height;
Type 'number' is not assignable to type 'string'
I have already searched on Google but none of the solutions provided worked!
Attempted solution: Type 'number' is not assignable to type 'string'