hidden file input element not working on IE Edge - html

Question

I created the following where an icon is pressed to initiate the upload process instead of the usual browse.... It works in Chrome, FireFox, and I believe in older versions of IE (I tested it using IE's Document Mode) except Edge. On IE Edge when the icon is clicked nothing happens.
What can I do to make it work in Chrome, Firefox, IE Edge and at least IE 10 and 9?
Result: https://jsfiddle.net/sk5cg2wy/
/* Upload Photo */
.upload-wrapper {
width: 250px;
height: 250px;
margin: 0 auto;
}
.upload-wrapper img {
width: 250px
height: 280px;
cursor: pointer;
}
.upload-wrapper input {
display: none;
}
<!-- start upload wrapper -->
<div class='upload-wrapper'>
<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
<label for='file-input'>
<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>
</label>
<input type='file' name='photo' id='file-input' accept='image/*'>
</form>
</div>
<!-- end upload wrapper -->

Answer 1

Strange behavior of the IE-Edge didn't know that this is exists.
You can try to add image to the label as background-image, I've tested it in IE-Edge (Windows 7) and it's work.
JSFiddle
HTML:
<!-- start upload wrapper -->
<div class='upload-wrapper'>
<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
<label for='file-input'>
<!--<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>-->
</label>
<input type='file' name='photo' id='file-input' accept='image/*'>
</form>
</div>
<!-- end upload wrapper -->
CSS:
/* Upload Photo */
.upload-wrapper {
width: 250px;
height: 250px;
margin: 0 auto;
}
.upload-wrapper img {
width: 250px
height: 280px;
cursor: pointer;
}
[for="file-input"] {
display: block;
background-color: #ddd; /*as fallback*/
background: url(http://i.imgur.com/MIY6LmH.png);
background-repeat: no-repeat;
background-size: cover;
width: 250px;
height: 250px;
}
.upload-wrapper input {
display: none;
}

Answer 2

#Konrud already wrote a workaround, but it doesn't fix/explain the actual problem. As far as I've analysed, it doesn't work because the label is no block-element and therefore takes no space. Edge is actually behaving correctly. Add display block and it will work (also in other browser behaving "correctly":
label {
display: block;
}