Updated on October 27, 2015
Empty File Inputs in IE9
In all web development, you run into a bug that’s specific to a browser/version, and defies common sense. At least common sense in the way web development can make sense sometimes.
The past day or two, I have been debugging an issue that had me ready to pull my hair out. It’s specific to IE9 (or the new IE6), and file inputs not being sent to the server through a form POST.
To give some background, I had put together a little component in this web app to handle file upload. It was more of a hack than anything.
This solution works excellently….mostly. IE9 decides to rear its ugly head and decide the file inputs are empty upon submission of the form. Although the change event still fires, and this.value actually has the path of the file in it.
Interesting to say the least.
Using the Chrome dev tools, I can see the input doesn’t have a value, even though the JS says it should. Seeing that it is IE9, I was ready to just say, “don’t use IE9”, but in my workplace, that’s not an option.
So…more work to be done.
The Key is in the Click
Upon reaching the point of almost resorting to head/desk exercises, I decided to just rip out the fanciness and revert back to traditional file inputs. Those worked beautifully. There goes my, “it wasn’t my code” excuse.
I did not try making the file input visible to see if that made somewhat of a difference, but that would break my design and I just can’t have that. 😛
Don’t Do This