Custom file upload button not working in Microsoft Edge

Question

I'm trying to create a custom image upload button, which works very well in Chrome, Firefox and Opera as far as I tested it, but it won't work in Microsoft Edge.

Here's an example of it: https://jsfiddle.net/k1xahf1k/2/

The HTML code:

    <div class="row">
            <div class="form-group col-sm-3 col-sm-offset-2 col-xs-10">
                <input id="filename-upload" placeholder="Bild hochladen" disabled="disabled"/>
            </div>
            <div class="form-group mobile-col-1 col-xs-1">
                <label class="btn-file-upload">
                    <span class="glyphicon glyphicon-file"></span>
                    <input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>
                    <input type="file" name="pictures" accept="image/*" hidden/>
                </label>
            </div>

            <div class="form-group col-sm-4 col-xs-12">
                <img id="preview" class="img-responsive img-preview" src="" alt=""/>
            </div>
        </div>

And here's the CSS:

input {
     font-family: 'Open Sans', sans-serif;
     outline: 0;
     background: #f2f2f2;
     width: 100%;
     border: 0;
     margin: 0 0 15px;
     padding: 15px;
     box-sizing: border-box;
     font-size: 14px;
}

select::-ms-expand {
     display: none;
 }
select {
    -webkit-appearance: none;
    -moz-appearance: none;      
     appearance: none;
}
      .btn-file-upload {
     background-color: transparent;
     color: #FF9800;
     font-size: 40px;
     margin: 0;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     cursor: pointer;
}

[hidden] {
     display: none !important;
}

I would be really glad if someone could help me out with this.

score 1 · Answer 1 · answered Oct 16 '17 at 17:03

1

you can just use label along with for attribute in label and give an id for input type='file' and hide that with style none.

answered Oct 16 '17 at 17:03

Shubham Agrawal

417
3
11

You can refer to this answer https://stackoverflow.com/questions/572768/styling-an-input-type-file-button?rq=1 – Shubham Agrawal Oct 16 '17 at 17:10

score 1 · Accepted Answer · answered Oct 16 '17 at 17:10

Edge does not like the fact that your label contains two input controls, even though one of them is of type "hidden". If you move the hidden one out, the open file dialog pops up. See the change here: https://jsfiddle.net/j257nepo/

<label class="btn-file-upload">
    <span class="glyphicon glyphicon-file"></span>
    <input type="file" name="pictures" accept="image/*" hidden/>
</label>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>

Custom file upload button not working in Microsoft Edge

2 Answers2