Upload From a Link
I don’t use Internet Explorer on a regular basis anymore, so I’ve missed some of the IE-specific functionality in Gmail. I was talking with my pal Brad, who pointed out that Gmail has a really cool function in IE: you click “Attach a File” and the Open File dialog pops up…no input element or anything! He then gave me a challenge: figure out how to do it. I search around the web and didn’t find anything, so I set out to discover how this trick works.
It’s actually a bit simpler than I initially thought. In IE only, you can cause the file dialog to pop up by calling the click() method on a file input field. That’s easy enough, the trouble is when you try to submit the form. As soon as the submit button gets focus, the file input field clears. If you try to submit the form using JavaScript, you can an Access Denied error. So to make this work, you need a little bit of indirection.
Here’s the trick: you need to place a form with a file input field and a button into an iframe. The button should be set up to submit the form. When you click a link on the main page, it calls click() on the file input field, checks to see if a value has been provided, then calls click() on the button, which in turn submits the form. For some reason, this bypasses the security restrictions. Try it yourself (IE only):
Pretty cool huh? Too bad it only works in IE. Then again, perhaps it’s too big of a security risk and it shouldn’t be working in IE. Ah well. You can download the source here.
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of Yahoo!, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.
Both comments and pings are currently closed.
11 Comments
That is slick! Wish it worked in Firecrap… that’d be nice.
Jeremy on January 30th, 2006 at 10:41 am
How on earth do you justify calling a security exploit "cool" and "slick"?
Sounds like a case of "Web 2.0" fever
Now if you could get that operable in a safe way…
J Sheehy on January 30th, 2006 at 6:14 pm
Who and where does it say it’s a security exploit?
Jeremy on January 30th, 2006 at 9:46 pm
@J Sheehy - it already is safe. Think about it, the functionality is no different than using a file input field. The click doesn’t trick the user into uploading something against their will, it’s just a different way of doing it.
Nicholas C. Zakas on January 30th, 2006 at 10:16 pm
damn buddy, that really is pretty slick
foO on January 31st, 2006 at 11:02 am
Do you have this in non-php format?
Soo on February 2nd, 2006 at 4:19 pm
Soo - no, sorry. My server only supports PHP, so that’s the only one I could build and test.
Nicholas C. Zakas on February 2nd, 2006 at 7:55 pm
I thought I should mention that I just tried this using Safari 2.0.3, and from what I can tell, it may work. I don’t know if it keeps the value or not, but the file dialog pops up on you’re demonstration above. I haven’t tried GMail and attachments, but I thought I’d let you know this may not be a completely IE biased "feature".
Joshua St. Marie on February 17th, 2006 at 1:57 am
Wow, very cool! Let me know if your further experiments get you anywhere.
Nicholas C. Zakas on February 17th, 2006 at 1:42 pm
Yeah it definitely works under a new version of Safari (2.0.4 now), no doubt about it, although I had nearly forgotten that I posted here! Oops.
I have no way to test this on older versions, but it shouldn’t matter too much, I think a lot of Mac users are pretty good at updating their Mac’s, and if not, then it’s their loss.
Joshua St. Marie on July 5th, 2006 at 10:17 am
Thank you for sharing this trick.
I wanted to do this and I had the Access Denied error. I tried to search around and everybody said that it wasn’t possible but then I learnt that Gmail had it so I searched again and found your wonderful post.
Thanks, now life might be a little easier for some users that don’t understand what the "Browse…" button means
Alfonso on August 7th, 2006 at 6:19 pm