Blazor Input File Component (File Upload)

user_4324496 0
Viewed 18011

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.

enter image description here

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)

blazorinputfile blazored blazor asp.net-core file-upload
3 Answers

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:

enter image description here

The full source code and a sample project is here if it might help anyone:

https://github.com/DataJuggler/BlazorFileUpload

Nuget: DataJuggler.Blazor.FileUpload

Admin1

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? :)

user_166050820

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.

user_43244960
Related