IE9 file input triggering using Javascript

Question

I had a post here:

.change acting weird in IE9

However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.

My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.

I have a file input

<input type="file" name="abc"/>

now I've done 2 things.

I've hidden the input and created a button (for better styling control) that activates the input.

<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>

and then the JS for the interaction between the two:

$("#mybutton").click(function() {
    $("Input[type=file]").click()
};

and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).

$("input[type=file]").change(function() {
  $(this).parent().submit();
});

When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()

anyone know how to fix this?

Solution 1

As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.

The good news is that there is a way to bypass the security restriction from IE using a label :

1. Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
2. Disguise the label as a button using CSS.
3. The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.

Solution 2

If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.

Comments

[Brodie]

ah ic... well a solution that I've seen is to take the input field and style it to the size fo the faux button and hide it above the button (so a user thinks they're clicking a button but they're really clicking the form). It's just verrrrry ugly and a lot of unhappy CSS to deal with...

[Ali]

I guess you can use flash as well! I think this is what most people like Gmail ... are using.

[Daniel]

Man this works fine, it is what I was looking for! I´ve tryed a lot of other methods in IE 9 but only this worked!

[David Work]

@A. Clement Thanks this really saved me!

[Admin]

IMHO this should have been the answer!

[Warface]

This is the answer to all file upload restrictions in IE !!!! You deserve more upvote

[Brodie]

sorry, haven't curated my old questions in awhile. changing this to the answer as it is more comprehensive :D