Skip to Content

The challenge

After reading about Brian McKellar’s challenge in Craig Cmehil’s weblog INPUT TYPE=”FILE” and your options… , I remembered that this has annoyed me as well for some time, and set out to investigate the possibilities.

For those who do not know the problem, the image below will illustrate it. The browse button beside the file input field is mandatory, and unlike most other HTML elements there is no style attribute you can apply to it. image

There is no spoon

A lot of people would have taken it for granted that there was no way of changing the appearance of this button, but watching the matrix a few times lead me to believe otherwise. Just as there is no spoon, there is no way to change the appearance of the browse button. Untill, you’ve realized this you cannot succeed.

Let us assume there is a standard style attribute attribute on the file upload input element (although we know there really isn’t). Then the following code should be able to change its appearance:

The code basically defines a CSS class and assigns it to an input field (which must be inside a form element).

Close, but no cigar

Since we know we can’t change the browser button’s style, we might as well add a new to the form and change the style on that. Adding the button on top of the file upload browse button, would hide its ugliness. We can use relative placing on a span element to achieve this.

Although it would probably look better now, the file upload doesn’t work anymore as we only press the new button and not the browse button which opens up the file dialog. Couldn’t we say that if the button was clicked, it again should tell the browse button that it was clicked? Doing this, we end up with the following code:

  style=”position: relative; top: 0px; left: -85px;”>

This is rendered in IE as below:
image

The line of code that does most of the work is document.forms[‘myForm’].myFile.click(). It basically says that in the form myForm, the element myFile should simulate a mouse click. Unfortunately, this only works in IE and not really here either. Allthough the file dialog comes up, and the filename is placed in the input field, once you push submit the field is blanked out and the form is never sent. This is probably the same code that Brian once tried to ship in the service pack.

The actual solution

It seems like it actually is possible to assign a style to the

element, although very few style elements are allowed. One of the few which are allowed is the attribute called opacity, which sets the transparency of the element. This element is actually part of the upcoming CSS3 specification, but has been implemented in some form in major browsers IE 5.5+, Mozilla 1.6+(?), Konquerer and Safari, but unfortunately not in Opera. By setting this style on the file upload field we can actually make it invisible, but at the same time it is completly functional.

What we do is to create a fake dummy form which is in the background (use the z-index css attribute for layer order). It contains a text field and the button/image we would like for the upload. When the user clicks the “fake” button, the user actually hits the file upload browse button and the file dialog is shown. To be more user friendly we read the file name from the invisible file upload field and add it to the “fake” input field. We’ve also replaced the button we used in the previous examples with an image. The actual code for all this is shown below:

style=”position: absolute; top: 10px; left: 10px;z-index: 1;”>

style=”position: absolute; top: 10px; left: 10px; z-index: 0;”>

Working example

For a working example you can go to http://temp.elsewhat.com (this site might not be up, as it is running on my computer which tends to crash every now and then). A screen shot of the example is provided below:
image

Limitations

There are some limitations to this solution:

  • It only works in browser supporting opacity, not in for example IE 5.0. In IE 5.0 the fall-back solution will be that both layers are displayed, but the file upload will be on top and will at least partially cover the fake form.
  • You cannot select the text in the input field since the invisible file upload gets focus on click. This might be possible to circumvent with some clever javascripting
To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Brian McKellar
    Hallo Dagfinn,

    Once I tried many weeks to crack a specific browser problem. I then asked a great hacker, and he solved it within days. His answer: “I was looking at question X, he looked at and solved question Y!”. And this you did as well. While we were banging our heads on the wall in frustration, you used yours to find an excellent and refreshing alternative way to look at the same problem.

    This weblog has been a pleasure to read. It shows a simple and elegant solution to this problem. You have taken the challenge, and I will request that SDN transfer the deserved points over to you!

    regards, brian

    (0) 
  2. Craig Cmehil
    Impressive work Dagfinn!! Very impressive, just goes to show that keeping up with the latest and greatest with CSS and what’s attributes tags have is a good thing!!

    Beautiful solution thank you!! I’m sure this will help those originally seeking the solution a lot!

    Craig

    (0) 
      1. Dagfinn Parnas Post author
        I’ve tested on a win2k machine running IE 6.0SP1 and mozilla firefox 1.7.

        What do you get as output (send me an email to dagfinn.parnas@bouvet.no) ?
        Does http://temp.elsewhat.com work ?

        If you copy the code directly from this blog, you will need to provide an image (open.jpg I believe).

        I’ve also noted that it the css style doesn’t like to have HTML/SGML comments inside. Using the comments I had problems with the css class not being created.

        And last, for all I know there might be some security setting, as invisible, but working, elements are not very secure.

        (0) 
        1. Craig Cmehil
          Well I’ve not gotten your code or the website to work.  So perhaps this is NOT a 100% solution? You might want to update the weblog to show there are some possible/potential problems?

          I also went through all of my security settings and looked on the web but this just doesn’t work.

          ????

          (0) 

Leave a Reply