Question

This is basically and simplified what I have now:

<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="/user/photo">Upload photo</a>

<script>
$('uf').addEvent('change', function(e) {
  // alert('oele'); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
  $('uf').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>

What it does (perfectly) in Chrome 11 and FF 4:

1. The form is hidden.
2. You click the link
3. Choose file dialog opens
4. You select a file
5. Dialog closes
6. Form is submitted
7. Script in iframe is executed and photo is replaced

Very hightechlike and sweet.

In IE, all of that works, except [6]. The form isn’t submitted. Javascript error: “Access denied”. Doesn’t matter how the form is invisible, as long as the dialog was opened with input.click() the form can’t be submitted on change. (The onchange function is executed fine. The error only occurs when form.submit() is called.)

Now all of this I can accept. IE sucks. I live with it.

My solution so far was to check the navigator for “MSIE” and then when clicking the link instead of opening the dialog, showing the form (with the file input). Then the user has to click the actual, ugly file input and then everything works fine. But ugly.

The question is twofold:

1. Is there a way to do this in IE as cool as it is in Chrome? WITHOUT nasty flash/java crap. Only html elements andjavascript.
2. If not: is there a way to check for form.submit() support after opening the dialog from a link (besides !navigator.contains("MSIE"))?

[2] could be catching the “Access denied” exception thrown in IE, but then it’s too late: the user has already opened the dialog and browsed to the photo. You don’t wanna make him do that again. (Even IE users don’t deserve that.)

PS. I’m only interested in Chrome 10+, Firefox 3.6+ and IE8+.

PS. Might be important: the file input element can’t be anywhere near the link, because the link is inside a form and that form is (must be) separate from the file upload form.

UPDATE
Second best: detect support for this high-techlike behaviour that only doesn’t work in IE. I don’t wanna use navigator.appName.contains('MSIE') because that’s not flexible and not necessarily true.

Answer 1

I did it!!

http://jsfiddle.net/rudiedirkx/8hzjP/show/

<label for="picture">Upload picture</label>
<input type="file" id="picture" style="position: absolute; visibility: hidden" />

IE8 works. I don’t care about others.

So easy =)