Пользовательская кнопка загрузки файла не работает в Microsoft Edge

Я пытаюсь создать пользовательскую кнопку загрузки изображения, которая очень хорошо работает в Chrome, Firefox и Opera, насколько я тестировал, но не будет работать в Microsoft Edge.

Вот пример: https://jsfiddle.net/k1xahf1k/2/

Код HTML:

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

А вот 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;
}

Я был бы очень рад, если бы мне в этом помогли.