Robert Rocha Robert Rocha - 5 months ago 39
CSS Question

hidden file input element not working on IE Edge

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

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;
}