Height and Width from File Objects?

[mmtalon]

Does a javascript file object contain height(h) and width(w) information? If the "File Object" doesn't contain h & w information is there a simple way of obtaining h & w without using J-Query. Please try to be specific in your replies. More importantly, thank you for your help!

Example code below:

// User selected file or files are passed to the "getFiles" function via the "formNode" form.

<form id="formNode">
<input onclick = "getFiles(Files); return true" value="Get Files" type="button">
</form>

	function getFiles(files) {
			
		 for (var i = 0, f; f=files[i]; i++) {
			 
			// Displays file size of the "File Object" files[i].
			 alert(files[i].size); 
			
			// files[i].height or width displays "undefined".
			alert(file[i].height);
                        alert(file[i].width);	
		}
	}

[jscheuer1]

A file has no width or height unless it's an image. For javascript to access those properties, the image must be loaded by the browser, either on the page or as a javascript Image Object. Either way the user's browser must download the file. Server side code can get that information directly from the file without the user downloading it. But that requires PHP or asp or some other server side language available to you via your host. The size of a file is not accessible via javascript except in IE, again only after the user downloads the file. But its size can be gotten server side, again if you have server side code available. That information (dimensions if it's an image, size for any file) about the file, which can be obtained server side cannot be displayed in real time on the page unless AJAX is used to query (GET) or POST to a page with the server side code on it via javascript. Otherwise a separate page must be loaded (or the current page reloaded) in order to display that information.

Do you have a server side language available?

[mmtalon]

I know there is not much browser support for what I am after (returning the width and height using javascript). However, I want to use this method for the supportive browsers because it's quicker to process the images on the client side. And for those browser that don't support client side javascript processing I will use PHP and AJAX as a back up. My hope is that all the major browser will eventually support client side image processing. I was successful in obtaining the width and height of the images before uploading them to my server using the code below. Perhaps I'm doing all this in vain because the other browser seem slow to adopt the new file API.

It would be interesting to get your insight with this matter.

Thank you again so much for your reply.

reader = new FileReader();
	reader.onload = (function (){
		return function(evt){
			var imagex = evt.target.result;
			var getImage = [];
			var newimage = new Image();
			newimage.src = imagex;
			alert("the width is: " +newimage.width + " and the height is: " + newimage.height);
			getImage[0] = newimage.width;
			getImage[1] = newimage.height;
		return getImage;
		};
	})();
	reader.readAsDataURL(file);

Does a javascript file object contain height(h) and width(w) information? If the "File Object" doesn't contain h & w information is there a simple way of obtaining h & w without using J-Query. Please try to be specific in your replies. More importantly, thank you for your help!

Example code below:

// User selected file or files are passed to the "getFiles" function via the "formNode" form.

<form id="formNode">
<input onclick = "getFiles(Files); return true" value="Get Files" type="button">
</form>

	function getFiles(files) {
			
		 for (var i = 0, f; f=files[i]; i++) {
			 
			// Displays file size of the "File Object" files[i].
			 alert(files[i].size); 
			
			// files[i].height or width displays "undefined".
			alert(file[i].height);
                        alert(file[i].width);	
		}
	}

[jscheuer1]

That's a new one on me - FileReader. By doing:

console.log(typeof FileReader)

I see that it's a native function in Chrome (latest), Opera (latest), Firefox (latest), and IE 10, but not IE 9 or earlier.

However, all browsers that support javascript that are in use today have Image as a native function. I don't know if FileReader speeds things up or not. I do see that the code you have there that uses FileReader also uses Image, and it looks like it loads the file. That won't take much time at all if the file is already on the user's computer. But, as I said before, if it's not, it must first be downloaded. In any case this would work in any browser with javascript:

var image = new Image();
image.onload = function(){
	alert('The Image: ' + this.src + '\nis ' + this.width + ' pixels wide, and ' + this.height + ' pixels high.');
}
image.src = 'path/filename.jpg';

[jscheuer1]

I looked into this a bit more and have discovered that although it looks like it might have some problems, your code could work, there's just not enough of it there to know for sure. I found this page:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

That shows what can be done. I even used one of its demos to make up a more elaborate demo:

http://home.comcast.net/~jscheuer1/s...ile/images.htm

Requires later versions of browsers, ones that support the File Object. That's almost any current version browser including IE 10, but not IE 9 or less. Multiple files can be processed at once. You can click on the thumbnail(s) to pop up a new window with a larger (if the image itself is larger than the thumb) version of the image.

The method I had in mind using just the Image Object doesn't seem workable for files on the user's own computer, not unless they upload them first.

And I discovered that, even with the File Object method, even though the image is already on the user's computed, it still has to load into the browser to get the width and height. It might even have to load twice. That's because the File Object works by loading the file into memory, and to get the width and height, the file data then has to be loaded into a new Image. IE can actually get the width and height sooner than onload of the new Image, but others do not. And there's no easy way I can see (perhaps no way) to get IE to stop loading the new Image once it has its dimensions. IE has to at least start loading it to get the dimensions.

[mmtalon]

Hi John,

Thank you for your insight. I use HTML5Rocks for reference all the time. However, I still need other folks perspective on javascript coding until I can get a good grasp of javascript peculiarities. The code that I have been posting here are just snippets of the coding that I'm trying to achieve. You can go to this link (http://one2onerealtygroup.com/dogtest/resize.php) to see the project that I'm working on. You may have to muddle through it because I'm not a pro coder, but I do my best. There's a lot of comments and code that has been commented out, which may not make sense. And there may be times when the code just won't work because it is work in progress.

I'll be using HTML5's canvas to allow the user to resize one or more images that the user selects before uploading to my server (my ISP). And as stated before, if the user's browser doesn't support canvas or the new AP interfaces the user's images will be uploaded and processed or resized using PHP. I know I have my work cut out for me but the bright side is that I'll learn a lot in the process. And thanks to the Internet that links me to folks like yourself that is willing to share and make others life a lot easier. Thank you for sharing your time and expertise.

I looked into this a bit more and have discovered that although it looks like it might have some problems, your code could work, there's just not enough of it there to know for sure. I found this page:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

That shows what can be done. I even used one of its demos to make up a more elaborate demo:

http://home.comcast.net/~jscheuer1/s...ile/images.htm

Requires later versions of browsers, ones that support the File Object. That's almost any current version browser including IE 10, but not IE 9 or less. Multiple files can be processed at once. You can click on the thumbnail(s) to pop up a new window with a larger (if the image itself is larger than the thumb) version of the image.

The method I had in mind using just the Image Object doesn't seem workable for files on the user's own computer, not unless they upload them first.

And I discovered that, even with the File Object method, even though the image is already on the user's computed, it still has to load into the browser to get the width and height. It might even have to load twice. That's because the File Object works by loading the file into memory, and to get the width and height, the file data then has to be loaded into a new Image. IE can actually get the width and height sooner than onload of the new Image, but others do not. And there's no easy way I can see (perhaps no way) to get IE to stop loading the new Image once it has its dimensions. IE has to at least start loading it to get the dimensions.