Blazor Input File Component (File Upload) - asp.net-core

Question

I am facing one small issue related to Blazor Input File component used for file upload.
Source - https://github.com/SteveSandersonMS/BlazorInputFile
Component Call -
<div class="form-control">
<InputFile OnChange="HandleFileSelected" />
</div>
I am successfully able to upload and delete files with this component. When I am uploading the file, the file name is shown beside component as shown in the screenshot below.
When I am deleting the file, the file gets deleted successfully but the file name is still shown beside component.
I want the file name should be removed once I delete the file. I tried few option but no luck example StateHasChanged();
Is it possible to just refresh the specific component ?? How ?
Could anyone please help to solve this issue. (I don't want to use javascript to achieve the solution)

Answer 1

An easy way to achieve this is simply using some Bootstrap 4.
<div class="custom-file" style="overflow: hidden; white-space: nowrap;" id="customFile">
<InputFile OnChange="OnInputFileChange" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp" multiple></InputFile>
<label class="custom-file-label" for="exampleInputFile">
#InputFileMessage
</label>
</div>
and then in the code behind you'll have something like this
IBrowserFile File;
public string InputFileMessage = "Select a file...";
public void OnInputFileChange(InputFileChangeEventArgs e)
{
File=e.File;
InputFileMessage=e.File.Name;
}
And then whenever you want to reset the InputFile's label to its default value, you can just
InputFileMessage = "Select a file...";
Easy, isn't it? :)

Answer 2

I can show you what I did to hide the standard file input, and show a custom image and use custom labels for the file names, so you can hide it, change the text, etc.
I have a wrapper component to BlazorInputFile with an option to hide the standard input, and show a button or another image, and bind a variable to show the file name:
<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; }
In my CSS I hide the input file like this, which doesn't work on Edge, working on that:
Here is the CustomButtonClassName, this uses my Start image:
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;
}
And the end result is my Upload button looks like this:
The full source code and a sample project is here if it might help anyone:
https://github.com/DataJuggler/BlazorFileUpload
Nuget: DataJuggler.Blazor.FileUpload

Answer 3

Thanks Chris Pratt & Data Juggler for you response..
I wrote small logic to toggle the upload file control..it will appear only when file needs to be uploaded and will disappear when upload is done successfully.
Simple function did the trick.
public void ToggleFileUpload()
{
if (showUploadFileComponent == true)
showUploadFileComponent = false;
else
showUploadFileComponent = true;
}
Thanks. Hope this helps if anyone facing same issue.