CODEWITHSUNDEEP
htmlcssinternet-explorer
Robert
Robert

Reputation: 10390

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

Upvotes: 0

Views: 1765

Answers (2)

MattDiMu
MattDiMu

Reputation: 5013

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

Upvotes: 0

Konrud
Konrud

Reputation: 1114

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

Upvotes: 1

Related Questions