Open file input dialog and upload onchange possible in IE?

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:

The form is hidden.
You click the link
Choose file dialog opens
You select a file
Dialog closes
Form is submitted
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:

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.
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.

I have a feeling it might be doable for IE using some sort of activex or vbscript hackery, but not exactly an expert at those so can't really help with that. — Jani Hartikainen
– Jani Hartikainen, Commented May 1, 2011 at 3:49
I suspect the problem is with the fact you're sending this into iframe - try posting to the same page and see if it works. — user447356
– user447356, Commented May 1, 2011 at 10:37
@Jani I don't want to use ActiveX or VB hackery =) Is there no better way than checking navigator.appVersion for "MSIE"?? — Rudie
– Rudie, Commented May 1, 2011 at 13:07
@Shadow The error occurs when submitting the form, not because it's submitting into an iframe. (I tried it.) Same error in the same place and no page reload or anything =( If you can't submit the form, why the hell does IE allow the file choose dialog to open?? — Rudie
– Rudie, Commented May 1, 2011 at 13:10
@Rudie worked for me with IE8... can you post link to live example? — user447356
– user447356, Commented May 1, 2011 at 13:40

Community · Accepted Answer · 2017-05-23 11:51:39Z

12

@Rudie, up here - Thanks for that code! It works great in IE and Chrome, but not in FireFox.

I managed to take my old code (That works in FF and Chrome) and combined your code for MSIE.

Check it out here:

FIX FOR IE, CHROME AND FIREFOX

https://gist.github.com/4337047

PROBLEM: When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form. If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.

Please note that IE11, as of now, is allowing the form to submit if a file input field has changed via a scripted 'click' event.

Solution (partly thanks to Rudie @ Stackoverflow, https://stackoverflow.com/users/247372/rudie , http://hotblocks.nl/):

Make a label for the input in IE. If you click it, it will force a click on the input field - and IE will accept that (dumbass IE thinks user clicked the input field, hah)

So in that label we'll put our own styled DIV.

Next problem was, this doesn't work in FF. So we made a simple (possible nasty) browser check, and based on the browser we'll show a different button.

Solution is right here. Tested in:

Win 7 x64
FireFox 13.01
Chrome 23.0.1271.97 m
IE9 in regular IE9 mode

More tests / additions to code are MORE than welcome!

EDIT:

To quote Roy McKenzie

IE11 is now allowing the form to submit if a file input field has changed via a scripted 'click' event.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Dec 19, 2012 at 14:32

Rob

4,9874 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rudie Over a year ago

Browser sniffing is unacceptable for me. +1 for the successful effort though.

Rob Over a year ago

Thanks, but why is that unacceptable for you? I know its not really that nice, but still - does it really matter that much? Its a workaround for Internet Explorer, and just and only Internet Explorer.

Rudie Over a year ago

Yes it matters, because browser sniffing doesn't mean anything. You can spoof user agent string. Maybe IE will update for it to work. It might work in IE 9. Etc. Feature detection would be acceptable, but that seems impossible.

Rob Over a year ago

Okay, but why would you spoof your browsers' name? Go on the web with IE pretending to be Chrome and then whine about sites that don't work.. yeah :P Also, the detection function will most likely be updated as it is jQuery. Just keep jQuery up to date and you're good to go.

northdig Over a year ago

IE11 is now allowing the form to submit if a file input field has changed via a scripted 'click' event. Wahooo! I just tested the interaction in IE11 (which no longer has MSIE in it's userAgent string beeteedubs).

Rudie · Accepted Answer · 2015-10-30 21:38:55Z

8

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 =)

edited Oct 30, 2015 at 21:38

answered Sep 14, 2011 at 13:56

Rudie

54.2k42 gold badges137 silver badges176 bronze badges

4 Comments

Joucks Over a year ago

Thanks for this ! It works fine on Chrome and IE8 but not on Firefox though. I noticed that the trick has nothing to do with the "setTimeout" as one might think, it appears that the label goes on top of the hidden input and that's enough to "fake" the click.

Rudie Over a year ago

Huh... It doesn't work in Firefox. Damnit! So it's not perfect. Or even acceptable. checking all my old code

Rudie Over a year ago

Another version, but this one doesn't do so well in IE (9). jsfiddle.net/rudiedirkx/8hzjP/68/show Probably because not all of the file input opens the dialog in IE. If only IE just played nice for a change......

Mike Keskinov Over a year ago

Finally! Just add <label> pointing to input element and it works!!!! So easy!!! Silly IE!!

user447356 · Accepted Answer · 2011-05-01 20:06:10Z

2

Strange indeed, IE8 block the submission only if there's enctype="multipart/form-data" in the form.

One workaround that worked for me locally is adding "real" submit button e.g.

<input type="submit" id="btnSubmit" value="Submit" />

Then have such code to submit:

$('btnSubmit').click();

If this works you can probably hide the button with CSS to make it transparent to the user.

answered May 1, 2011 at 20:06

user447356

11 Comments

Rudie Over a year ago

Nope =( No dice. (But that would have been so cool.) js2.hotblocks.nl Did I do something wrong?

user447356 Over a year ago

@Rudie when I just change the file it works fine - only when clicking the link it denies access - same behavior for you?

Rudie Over a year ago

@Shadow Yup, same here. For some reason IE(8 and 9) allows the file dialog through the link, but doesn't allow the form submit when it's been used. I'm baffled! 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.)

user447356 Over a year ago

@Rudie let me mess with this some more when I'll have time.. keep reminding me in case I forget!

Rudie Over a year ago

By all means, do =) As will I. As said before: the "Upload photo" link can't be (anywhere near) the file input, because the link is in another (simpler, not file upload) form.

|

Engin · Accepted Answer · 2011-08-05 23:26:45Z

2

Well, this is the EXACT same problem I'm having right now. And only (disgusting) hack that did solve is to make the input[type=file] quite big with CSS, make it alpha=0 and put it on top of your intended UI element.

In short, you're making the user click the ugly "browse" button without him/her realizing.

answered Aug 5, 2011 at 23:26

Engin

1661 silver badge4 bronze badges

Comments

Rodrigo Da Silva Guerra · Accepted Answer · 2011-05-12 17:53:10Z

0

Try adding the tag enctype="multipart/form-data" to your form element.

answered May 12, 2011 at 17:53

Rodrigo Da Silva Guerra

213 bronze badges

1 Comment

Rudie Over a year ago

As you can see on js2.hotblocks.nl, I already have: <form target="photoframe" method="post" action="" enctype="multipart/form-data">. The upload actually works in FF and Chrome, so the correct enctype is necessary and present.

Collectives™ on Stack Overflow

Open file input dialog and upload onchange possible in IE?

5 Answers 5

5 Comments

4 Comments

11 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

4 Comments

11 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related