Blazor Input File Component (File Upload)

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)

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, Apr 08 '20 at 14:17
@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, Nov 27 '20 at 00:23
@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, Aug 08 '21 at 06:57

SomeGenericDev · Answer 1 · 2021-08-08T09:13:29.493

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

This appears to show both messages, from the InputFile and the InputFileMessage - so you have "No File Chosen..." and "Select a File..." message side by side - is there some CSS that needs to be applied to hide the InputFile message itself? — Kennetic, Aug 05 '22 at 10:32

score 1 · Answer 2 · answered Apr 08 '20 at 18:21

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

score 0 · Answer 3 · answered Apr 10 '20 at 17:02

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.

showUploadFileComponent = !showUploadFileComponent; – Rub3s Feb 11 '21 at 11:00 — Rub3s, Feb 11 '21 at 11:00

Blazor Input File Component (File Upload)

3 Answers3