Компонент входного файла Blazor (загрузка файла) - PullRequest
Новая
       35

Компонент входного файла Blazor (загрузка файла)

0 голосов
/ 08 апреля 2020

У меня возникла небольшая проблема, связанная с компонентом входного файла Blazor, используемым для загрузки файла.

Источник - https://github.com/SteveSandersonMS/BlazorInputFile

Component Call - 
  <div class="form-control">
       <InputFile OnChange="HandleFileSelected" />
  </div>

Я успешно могу загружать и удалять файлы с этим компонентом. Когда я загружаю файл, имя файла отображается рядом с компонентом, как показано на скриншоте ниже.

enter image description here

Когда я удаляю файл, файл удаляется успешно, но имя файла по-прежнему отображается рядом с компонентом.

I хочу, чтобы имя файла было удалено после удаления файла. Я попробовал несколько вариантов, но не повезло, например StateHasChanged ();

Можно ли просто обновить sh указанный c компонент ?? Как?

Может кто-нибудь, пожалуйста, помогите решить эту проблему. (Я не хочу использовать javascript для достижения решения)

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Спасибо Крису Пратту и Data Juggler за ваш ответ ..

Я написал небольшую логику c, чтобы переключить элемент управления файлом загрузки ... Он появится только тогда, когда файл должен быть загружен, и исчезнет при загрузке сделано успешно.

Простая функция сделала свое дело. 

public void ToggleFileUpload()
{
    if (showUploadFileComponent == true)
        showUploadFileComponent = false;
    else
        showUploadFileComponent = true;
}

Спасибо. Надеюсь, это поможет, если кто-то сталкивается с той же проблемой.

0 голосов
/ 08 апреля 2020

Я могу показать вам, что я сделал, чтобы скрыть стандартный ввод файла, показать пользовательское изображение и использовать пользовательские метки для имен файлов, чтобы вы могли скрыть его, изменить текст и т. Д. c.

У меня есть компонент-оболочка для BlazorInputFile с возможностью скрыть стандартный ввод и показать кнопку или другое изображение, а также привязать переменную для отображения имени файла: 

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


[Parameter] public EventCallback<string> OnReset { get; set; }

В моем CSS Я скрываю входной файл, как этот, который не работает на Edge, работая над этим:

Вот CustomButtonClassName, здесь используется мое начальное изображение: 

CustomButtonClassName="startbutton"

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


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

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

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

enter image description here

Полный исходный код и пример проекта здесь, если он может кому-нибудь помочь:

https://github.com/DataJuggler/BlazorFileUpload

Nuget: DataJuggler.Blazor.FileUpload

...