Getting height and width of image while uploading image in ui5

[former_member555537]

Hi,

I am using uploadcollection ui5 controls for uploading image. So I need to validate the image dimension in front-end.

So how can I get the image dimensions(height and width) ?

[former_member509861]

Hello,

What you need is to use the javascript FileReader() and Image() to get this information.

Basically you get the file information, uses the FileReader to read it, the Image to get it's information and use it to remove from the list:

_verifyImages: function (files) {
	var file = files[0];//I'm doing just for one element (Iterato over it and do for many)
	var obj = this;// to get access of the methods inside the other functions
	var reader = new FileReader();
	reader.onload = function (e) {
		var img = new Image();
		img.onload = function () {
			var info = {
				image: this,
				height: this.height,
				width: this.width
			};
			console.log("Imagem",info);//Just to see the info of the image
			obj._removeImageOrNot(info);//Here you will validate if 
		};
		img.src = e.target.result;
	};
	reader.readAsDataURL(file);//Iterate here if you need
},
_removeImageOrNot: function(imgInfo){
	//get the UploadColection files and remove if is needed
},

At the event Change of the UploadCollection do this:

onChange: function (oEvent) {
	var files = oEvent.getParameters("files").files;
	this._verifyImages(files);
},

With some customisation I hope it helps you 🙂