CODEWITHSUNDEEP
asp.net-corefile-uploadblazorblazoredblazorinputfile
ZKS
ZKS

Reputation: 2826

Blazor Input File Component (File Upload)

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)

Upvotes: 7

Views: 27831

Answers (4)

Sergio Valad&#227;o Junior
Sergio Valad&#227;o Junior

Reputation: 31

It’s been a long time since you posted your question, so I’m not sure if you found a solution. Follow below what worked for me:

  1. in your @Code, add a private Guid variable and initialize it with Guid.NewGuid(). I called that as "_inputFileKey".

  2. In the InputFile add the @key attribute and reference the new variable.

  3. when you delete the file, assign a new Guid value to the "_inputFileKey" variable.

So, it will force the Blazor Webassembly to refresh the InputFile Compoment.

Here some code example:

...

<div class="form-control">
    <InputFile @key="_inputFileKey" OnChange="HandleFileSelected" />
</div>

...

@code {
    private Guid _inputFileKey = Guid.NewGuid();

    ...
    ...

    private void Delete()
    {
        ...
        _inputFileKey = Guid.NewGuid();
        ...
        StateHasChanged();
    }
}

Upvotes: 0

SomeGenericDev
SomeGenericDev

Reputation: 641

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

Upvotes: 2

ZKS
ZKS

Reputation: 2826

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.

Upvotes: 0

user12228709
user12228709

Reputation:

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

Upvotes: 1

Related Questions