Custom file uploader buttons

About a year ago in my work project,  one requirement that arised was to make custom file upload buttons. Of course our friendly neighborhood Google made it easier these days to research on how to go about it. Then came a page where I was taught of hidding the browse button idea. I termed it "the magic" as I introduced it to my colleagues. 

The technique was to hide the two browse buttons atop the fileupload button image via CSS. Though I used YUI for simplicity on fileupload mechanism, the complexity started to loom when I had to hide the whole uploading process, and that was through iframe. If without iframe, the uploading will need to refresh the AJAX page, which will logout the user from the server session. One option was to open a new child window, but was readily rejected by the product team.

So, for a few months, the iframe-hidden-fileupload or "the magic" worked for the requirement, until we discovered that in IE one of the two browse buttons when used to upload any file, tends to transport the same file repetitively. Actually the one placed higher in terms of screen location, was the one having this issue, inspite of a JS code written to supposedly erase any previous path in the file input field.

As a solution, I recently made the iframe refresh after every fileupload process, to repaint again the fileupload form as a whole.