Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change the button text #7

Open
rusty-boffin opened this issue Jan 16, 2020 · 1 comment
Open

Change the button text #7

rusty-boffin opened this issue Jan 16, 2020 · 1 comment

Comments

@rusty-boffin
Copy link

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

@DataJuggler
Copy link
Owner

DataJuggler commented Jan 16, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants