verifying image dimensions before upload

I have a form which allows users to upload images to my site. The image must match specified dimensions. I (use to) believe that the only way to do this is to upload the entire file to the server then process it there. (In my case I use Java ImageIO).

However, one of our clients pointed out Googles AdWord - If I go to the Campaign tab, select "New Ad" -> "Image Ad", and fill in the form, Once I click submit I get an _instant_ message if the filesize or dimensions are wrong.

Using Firebug's (a Firefox plugin) to watch for server communications, I see no Ajax or simlar calls being sent. The feedback is instant even if I choose a large file. This leads me to believe this is some kind of javascript solution.

Does anyone know how AdWords is doing this? If it is some AJAX calls that is sneaking below Firebug that is fine, but how do they give that instant feedback? Anyone else seen this or have any ideas?

Steve B.

PS - I did try posting this on a Google Ajax group but got no reply there - I am guessing it was not the right group for this question.

 

I doubt it's javascript, since security issues won't allow javascript access to local files. My guess is that it has something to do with the google toolbar, if it's installed. If I'm wrong, I'd also like to know how this is done.

 

Hi,

I was also wondering if it's possible, and yes it might be javascript.

<form>
      <input type="file" onchange="var x= new Image(); x.onload=function(){alert('width='+x.width+'px, height='+x.height+'px')}; x.src='file://'+this.value;" />
</form>

HTML:

It could be written in a nicer way, but the idea is clear.

 

was this tested? will it work cross browser? what happens if the input file isn't an image?

 

Hi again,
I should be banned from DP for my previous post... When it's not image, it doesn't do anything, due to "onload" event. It was tested on IE6, FF2, but on local machine, not on server. Besides, I totally forgot that IE6 allows to access local files due to some bug, or lack of security. Firefox doesn't. So the whole example is useless and DOESN'T work in real life.
I was looking at Adwords, and I believe they are doing the check via iframe on server side. I didn't notice any prompt notification that the image dimension is not supported. I tried also bigger files and it took the time I would expect for upload, before getting any notification. As I don't have google toolbar, it could be like NoamBarz said.