internet explorer - How to make IE8/9 submit input type="file" when javascript triggered dialog open -

if have input type="file" somewhere, , on click of link triggers click on file input. user picks file.

in ie8/9 if user clicks on button type="submit" first click clears data in file input, second submits blank form.

how allow submission of input type="file" post javascript click trigger.

some notes:

• the click triggered consequence of click event. within event.
• the input type="file" not set display: none.
• no attempt manipulate user input done

ideas?

i've been struggling same problem, , i'm yet come across clean solution.

i have however, discovered work-around. please note the solutions below disregard best practices (in humble opinion) , if has better, more standards-compliant way of doing this, please post here.

fixing button click event

after fair amount of research, seems lot of people using trick whereby absolutely position <input type="file" /> on button, , set opacity zero. means that, user, looks clicking on button, browser sees click on <input type="file" /> (and avoids mentioned issue in ie). surprised see quirksmode recommended approach.

fixing button styles

now, introduce further cosmetic problems; may find buttons no longer trigger :hover , :active css pseudo classes (unless placed <input type="file" /> inside button), , mouse cursor default mouse cursor, despite css you've applied <input type="file" /> or button.

the classes easy fix javascript work-around (i'll leave you), cursor still issue. strangely, can style cursor of right hand path side of <input type="file" \>, not affect it's browse button. unfortunately (now transparent) button on part of styled button, resulting in default cursor on hover.

to solve this, stumbled across this work-around (jsfiddle here). basically, has bound event mousemove event of button, , positioned right-hand side of <input type="file" /> under mouse cursor every time hover on button. may need enhanced bit in order stop <input type="file" /> being clicked on outside of button's co-ordinates if button not have fixed size , overflow: hidden set.

conclusion

overall, i've found styling <input type="file" /> not worth it; there many hacks, , you're going have use javascript @ point if want (not great if you're trying support people have javascript disabled). have no idea how affect mobile either.

if you're targeting newer browsers support html5 file api, implement ajax drag / drop upload solution (here nice one), , rid of <input type="file" /> altogether. don't support (older browser , javascript disabled), leave unstyled <input type="file" /> there fallback.