There are numerous solutions available for this question regarding usage of JQuery, JavaScript, and various versions of Angular.
I have attempted multiple solutions but none seem to be working for me.
Currently, I am utilizing Angular 7 and attempting to validate the uploaded image's Width and Height provided by the user.
Below is a snippet of my .html code:
<input type="file" name="upload" id="androidPhoneFile" class="upload-box" placeholder="Upload File" multiple="multiple" (change)="onAndroidPhoneChange($event)" formControlName="androidPhone" #androidPhonePhoto>
And here is a section from my .ts component file:
AddFilesToFormData(event: any, fileName: string) {
const reader = new FileReader();
const img = new Image();
img.onload = function() {
const height = img.height;
const width = img.width;
console.log('Width and Height', width, height);
};
img.src = event.target.files[0];
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
for (let i = 0; i < event.target.files.length; i++) {
this.formData.append(fileName, event.target.files[i]);
this.numberOfPhotos++;
}
};
}}