D'Arcy from Winnipeg
Solution Architecture, Business & Entrepreneurship, Microsoft, and Adoption

All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

Tuesday, August 7, 2007 8:45 AM

I'm trying to write some code that will allow users to upload files from a website. This can't be posted back with the rest of the page, so I'm doing it like every article on the web suggests when trying to duplicate Google's Add-Attachment Gmail functionality and I'm using dynamically created iframes. Hurray.

But the one thing that is driving me nuts...the one piece of functionality that I'm missing...is how GMail opens the "Choose File" dialog from a hyperlink and not from the gawd-awful looking "Browsel..." button that comes with the file-upload control!

I figured there was some way to style the file-upload control to trick out the button and hide the textbox...nope.

I figured I could call the click event of the file-upload control from another button or hyperlink...but there's no click event for the file upload control.

I figured if I glared at my GMail page long enough, it would become so uncomfortable that it would just say "Here, take this you creepy bugger!"...but alas no, it just commented on my really goodlookingness.

So I'm at a loss here...still looking, but if anyone has some ideas to shoot my way I'd appreciate it.

D




Feedback

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

I believe GMail makes use of ActiveX controls (provided your browser supports them).

If you choose the Basic HTML version of the GMail page (link at the bottom) you'll see it uses the same old gray button. 8/7/2007 10:01 AM | Dylan

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

Hey D'Arcy you can put the file upload control in a layer and absolutely position it over top of the the button or link you want, and THEN be sure to set it's opacity to 0%.

Did exactly this on "the project" I recently worked on ;)

More here http://www.quirksmode.org/dom/inputfile.html

Of course a much easier way than what you will find proposed in the link, is to initiate an "onClick" event for the file upload control in the "onClick" event for the control that you would like to initiate the event.

example:

<input id="fUpload" type="file" style="display:none;" />
<a href="#" onClick="document.getElementById('fUpload').click(); >upload

but, I believe this only works in IE...not sure if there is a Mozilla equivalent.

-Shane
~

8/7/2007 2:24 PM | Shaneo

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

~
Sorry, my html example got jumbled there, I'll try again

<input id="fUpload" type="file" style="display:none;" />
upload

-Shane 8/7/2007 2:27 PM | Shaneo

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

<input id="fUpload" type="file" style="display:none;" />
&lt;a href="#" onClick="document.getElementById('fUpload').click();"&gt;upload&lt;/a&gt;
8/7/2007 2:29 PM | Shaneo

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

ah that's Nucking Futz!

I put an example on my blog, here's the link http://www.shaneo.ca/Comments.aspx?ArticleID=173

<a href="http://www.shaneo.ca/Comments.aspx?ArticleID=173"my blog example 8/7/2007 2:35 PM | Shaneo

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

~

Apparently I do not know how to use the 3 seashells ;)

~ 8/7/2007 2:41 PM | Shaneo's example on his blog

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

I'm afraid I can't help...

However, I would like to know why you were looking at Justice's GMail???

C 8/7/2007 10:12 PM | Carl

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

Dylan: It's not an ActiveX object...I think they just use the code that Shane posted about, since it works in IE fine...but if you use Firefox in the advanced mode, you get the ugly looking File Upload controls showing up. Viva IE!

Shane: Thanks again for posting that!

Carl: When it comes to really good-lookingness, Justice FEARS ME!

D 8/8/2007 3:13 AM | D'Arcy from Winnipeg

# re: All I want for Christmas is the Google Add-Attachment functionality for my hyperlink...

~

Hey D'Arcy, don't forget to check out this link

http://www.quirksmode.org/dom/inputfile.html

A little more complex than the code I gave you but it shows a cross browser solution if you would like to actually style your upload button. We used it in our project at work because we needed the button to match the styling of the application and also because we require the button to be multi-lingual.

~ 8/8/2007 6:33 AM | Shaneo

Post a comment