Blazor Input File Component (File Upload)

5
votes

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)

3
asp.net-corefile-uploadblazorblazoredblazorinputfile
What you're seeing is just the built-in browser control for file uploads. The filename being there means that the file is still "attached". I'm not sure what you mean when you say you've "deleted" the file, but the way to clear that out is to actually reset the file input, which can be done by setting the value to null. - Chris Pratt
@ChrisPratt are there any guidelines on for InputFile when the file is around 5MB? In server side, my OnChange callback always crashes out when debugging. - Aaron Hudon
@Aaron Hudon I'm not sure how you're doing the upload, but the same happened to me until I set the max file size using await imageFile.OpenReadStream(100 * 1024 * 1024).CopyToAsync(fileStream); I use Photostock images that can be upward of 50MB, and I sometimes upload as many as 100 / day. Your server (I use IIS) might also have its own setting for maximum file transfers, so keep that in mind if you publish and get the problem again even though it worked on your dev system. - Bennyboy1973

3 Answers

1
votes

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

0
votes

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.

0
votes

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