file = input.files[0];
xhr = new XMLHttpRequest;
xhr.open("POST", "hi.cgi");
xhr.onload = ...;
xhr.sendAsBinary(file.getAsBinary());

With the URL in my previous comment you should be able to get progress events as well.

Your reply was a nice surprise! I wasn't expecting to get anything back from anyone official! I just have two things left to say. First, you say you haven't come up with any UI for clearing the file yet--but why not just do what Chrome is doing? That is, if you click "Browse...", and then press Cancel, have it clear out the file automatically. It's maybe not the most intuitive UI, but at least it's something (until you come up with something better). I didn't think to try clearing the value through JavaScript (that's good to know), but that's still more of a solution geared toward developers and not toward users. The other thing I have left to say is about CSS. I can understand that you'd be a bit weary to just do whatever you wanted in place of nonexistent standards, but some of the simpler attributes (e.g. height/width), seem pretty straightforward (then again I've never developed a browser!).

And lastly, if you do manage to find the documentation for uploading data from a file input through an XMLHttpRequest, that would be fantastic. Thanks much!

First, I think that a lot of what you are running into is work that we've explicitly done to try and protect users when they are browsing the web. We have two sets of audiences, users and developers, and sometimes they tend to conflict with each other.

In the case of file upload, there are a few important things that I'd like to respond to:

1. Text Box

This is included because we want the user to know what file they have selected. It's pretty easy to accidentally pick the wrong file and we want the user to have the chance to pick up on that mistake. We might change it in the future to not look like a text box. The only reason that it looks like one right now is largely a function of history. It was easier for us to make the text box read only than it was to try and change it to something else. Especially since we didn't really know what that something else might look like. This might change in the future.

2. Typing in Manually

It turns out that it was too easy to trick people into typing in a dangerous filename or cutting and pasting something that they shouldn't. One of our developers has a good story about an interesting attack that someone came up with: by allowing key press events and switching focus back and forth between a captcha and the file control they were able to take the text in the captcha which said "house / extra cat / passport w#d" and turn it into /etc/passwd in the file control, and the user would upload their password file. They spent a lot of time trying to come up with specific ways to defeat attacks as they came up, but the attacks kept getting more and more creative. So they just removed the functionality -- it was just too dangerous. We're looking at ways to be able to type in filenames, but it will probably happen outside of the web page itself -- possibly in the file picker.

3. Clear File

The only reason this isn't included is because we haven't come up with a UI for it. Note that you can clear it in script if you want by setting .value="" from another button.

4. .value Returns Full Path: Once again, this is about protecting users. Specifically preventing information about directory structure from being leaked to web sites. On a huge number of machines the account name for the user is included in the full path name. And if you have the username that's half of what's required for a username + password attack.

One of our developers points out that sometimes there are other things you might not have wanted to have uploaded. For example "/home/sicking/my boss is stupid/report.doc" -- I wouldn't want that uploaded.

5. CSS Rules.

The only reason why this doesn't work is because we haven't figured out all of the interactions, they aren't defined in the standards and we're somewhat reluctant to go out and create that entirely on our own. And you can apply some CSS rules to the file control -- just not all of them.

6. Upload Progress.

You can actually get update information as an xmlhttprequest is completing. There's some information here:

https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress

And I'm told that you're able to upload data that was selected via the file upload control, but I'm embarrassed to admit that I can't find the document on it. I'll keep looking for it.

Thanks for your comments, Gordon. It's important feedback.

This feature should be in all browsers.

But there are plenty of reasons not to provide it, the user may give away important information with out realising it: usernames, actual full names, company names, directory names that contain secret informations(eg. new company product names) etc.

It's obvious to the user that they are sending a file, and that the file name will also be send, but it's not obvious that the directory structure would be sent.

eg. A girl recently uploaded pictures to me through my website, and in the process gave away her Mother's full name, which was in the directory structure.

- Jesse McNelis

Styling the Fileinput is somewhat possible with a little scripthack that makes it invisible, overlays it with a custom image and then moves the input field around on mouseover so your button is always under the pointer when a mouseclick occurs.. see http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom for details..