html file upload form

Question

I have a web application with a simple file upload requirement (max 1 mb). The web application is an externally exposed web site that must be (as much as possible) compatible with all browsers and versions.

We are using C# .net 3.5 ASP .Net (IIS 7) technology.

We are having trouble implementing the file upload control:

<input type="file" ... />

The buttons are not clicking correctly and different input methods (eg clicking on the text box in some browsers will open the input field).

We need to avoid 3rd party file upload tools.

What is the best way to make this compatible with all browsers? Can we use frameworks (eg we could use JQuery) to do this?

Any help is really appreciated.

Edit:

Here are some more specific behaviour details:

Intended/Expected:

Consistent use of textbox field (for filename):

• displays filename of selected file
• no events fire launch of browse dialog

Consistent use of browse button:

• same css standards as standard HTML button for look and feel
• opens browse dialog
• dialog cancel - clears textbox field
• dialog ok - (re)populates textbox field

We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.

Current:

• textbox click events opens dialog
• generic display of textbox and button field
• browse button not working with some browsers (not firing browse dialog event, but being displayed)

As much as possible the behaviour (events/actions as above) should be consistent between all browser types.

Answer 1

You will not get a consistent UI. Each browser does it's own implementation. A Safari user will expect the Safari method, same for IE and so on.

You might have some success with CSS control of the box but be aware that modern browsers have a lot of security on this field. You will have limited control of this field compared to fields

Answer 2

What is the best way to make this compatible with all browsers?

It's already compatible with all browsers. Just don't try too hard to script it or overhaul the style. You have minimal customisation possibilities with the file upload field, partly for obvious security reasons and partly because the multiple-part rendering of the text+button arrangement in many browsers is simply not amenable to styling primitives that operate on single boxes.

(eg clicking on the text box in some browsers will open the input field).

Luckily people whose browsers do that will already be used to file upload fields doing that; indeed, they will expect the browser to do that, and be confused if you manage to stop it.

(And it's a sensible measure: allowing typing in the filename field is seldom useful, but it has caused security holes in the past.)

Consistent use of browse button:

Nothing about the file upload field even mandates a browse button or file-finder dialogue box. You might have eg. drap and drop instead. The browser decides this; as the site author you don't get a look in.

We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.

This isn't really possible within the realms of HTML. Hence the “third party uploaders”, typically Flash with HTML fallback.

There is one approach that you can sort-of use to make a file upload look like you want, but it's not very nice. You style a text field and button however you like, listen for changes to the file upload field and copy the value to the text field to display. The text field must be read-only because it won't be possible to allow the user to pick a file from there.

You then put the real file upload control on top of the fake one with CSS positioning, and give it CSS opacity (alpha filter in IE) so it's so faint you can't see it. You then have to hope that the browser decides to put a clickable part of the file upload field over the top of where you have rendered your button. Though you can fiddle and check it to work in many popular browsers, it's really very brittle and almost certainly a complete waste of time.