Edge Browser Скрыть загрузку файла по умолчанию

Question

У меня есть проект с открытым исходным кодом и пакет Nuget с именем DataJuggler.Blazor.FileUpload (https://github.com/DataJuggler/BlazorFileUpload)

Используя Chrome, следующие действия показывают пользовательскую кнопку для Загрузка файла:

 <FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
    OnReset="OnReset" ResetButtonClassName="localbutton"
    ShowStatus="false"  PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
    ShowCustomButton="true"  ButtonText="Start" CustomButtonClassName="startbutton" 
    AllowedExtensions=".jpg;.png;" ShowResetButton="false" 
    CustomExtensionMessage="Only .jpg and .png files are allowed." 
    AppendPartialGuid="true" InputFileClassName="customfileupload" 
    FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>

.customfileupload
{  
    display: inline-block;
    cursor: pointer;
    height:48px;
    min-height: 48px;
    visibility: hidden;
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
}

.startbutton
{
    position: fixed;
    background-color: transparent;
    border: 0px;
    outline: none;
    background-image: url('../images/StartButton.png');
    background-repeat: no-repeat;
    top: 36vh;
    left: 50%;
    width: 28%;
    height: 28%;
    background-size: 100%;
    margin-left: -14%;
    cursor: pointer;
}

И этот бит CSS скрывает ввод файла по умолчанию на Chrome

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button 
{ /* chromes and blink button */
    cursor: pointer;
    display: none;
}

На Chrome стандартный ввод файла скрыт, но на Edge это показывает:

Спасибо, я не часто использую Edge, но я хотел бы знать, как исправить это для пользователей, которые делают.

Answer 1

Благодаря мистеру Магу, я реорганизовал свой компонент для использования скрытого атрибута или нет, основываясь на видимом параметре:

[Parameter] public bool Visible { get; set; } = true;

Затем в разметке я отображаю его или нет на основе значения of Visible:

@if (Visible)
{
    <input type="file" class="@InputFileClassName" @ref="inputFileElement" 
            @attributes="UnmatchedParameters" />
}
else
{
    <input type="file" class="@InputFileClassName" @ref="inputFileElement" 
            @attributes="UnmatchedParameters" hidden />
}

И я добавил Visible Property к своему компоненту-обертке, и чтобы использовать его сейчас, я установил Visible = false для случаев, когда я не хочу, чтобы ввод по умолчанию появлялся, и он работает на Chrome и Edge. Я не проверял Firefox, но я думаю, что он также будет работать там.

Еще раз спасибо мистеру Магу. Забавно, что для любого, кто когда-либо делал ставку на то, чтобы я играл в 9 мячей или в один карман, мистер Магу был одним из самых приятных вещей, которые я слышал раньше.