Change the button text

[rusty-boffin]

Can you add a parameter to make it possible to change the button text to something other than "Choose File"?

[DataJuggler]

If you are referring to the Nuget package, it is not as straight forward as you might think to change the text of a input type = file.

Here is a Stack Overflow link discussing how to do it, but I prefer the way I did it in the sample yesterday (if you get the latest version of this project, the sample was updated).

https://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file
(There are quite a few duplicates of this, this isn't the exact one I read earlier).

This isn't exactly what you asked for, but maybe this is an ok workaround for now:

I wanted the buttons to match my Sign Up and Login buttons, so I added a pretty simple customization, but I am doing it outside of the Nuget package for now.

(a link is easier than me copying the code).

https://github.com/DataJuggler/BlazorFileUpload/blob/master/Sample/FileUploadSample/Pages/Index.razor

I will update the documentation, but there are a few steps to make that work, but pretty easy.

1. The css file needs the entries of custom-file-upload, and input type = file has display none:

..custom-file=upload
{
display: inline-block;
cursor: pointer;
height:64px;
min-height: 64px;
}

input[type="file"] {
display: none;
}
2. Create a boolean property in your consuming page or component for ShowUploadButton.
3. Copy any of the formatting / font css classes from site.css of the sample if you want to use them, else style however you wish.

<label class="custom-file-upload"> <FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded" PartialGuidLength="10" MaxFileSize="4194304" FilterByExtension="true" AllowedExtensions=".jpg;.png;" ShowResetButton="true" OnReset="OnReset" ButtonClassName="button" CustomExtensionMessage="Only .jpg and .png files are allowed." AppendPartialGuid="true" FileTooLargeMessage="The file uploaded must be 4 megabytes or smaller."> </FileUpload> @if (showUploadButton) { <span class="buttonwide height48"><span class="movedown8 fontverdana20">My Button Text</span></span> } </label>
(the line breaks did not format very well in the above code paste).

Not the same as a [parameter], but not too difficult.

I will try and incorporate this to the package with some options someday, but I am behind and some other projects right now.