hidden file input element not working on IE Edge
<p>I created the following where an icon is pressed to initiate the upload process instead of the usual <code>browse...</code>. 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.</p>

<p>What can I do to make it work in Chrome, Firefox, IE Edge and at least IE 10 and 9?</p>

<p>Result: <a href="https://jsfiddle.net/sk5cg2wy/" rel="nofollow">https://jsfiddle.net/sk5cg2wy/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- start upload wrapper --&gt;
&lt;div class='upload-wrapper'&gt;
  &lt;form enctype='multipart/form-data' action='photo_setup.php' method='POST'&gt;
    &lt;label for='file-input'&gt;
      &lt;img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'&gt;
    &lt;/label&gt;
    &lt;input type='file' name='photo' id='file-input' accept='image/*'&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;!-- end upload wrapper --&gt;</code></pre>
</div>
</div>
</p>