Menu
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
916
The Blazor framework provides built-in input components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table. Rendered as… For more information on the InputFile component, see ASP.NET Core Blazor file uploads.
@ref and ElementReference When we require a reference to an HTML element we should decorate that element (or Blazor component) with @ref. We identify which member in our component will hold a reference to the HTML element by creating a member with the type ElementReference and identify it on the element using the @ref attribute.
The EditForm component allows us to manage forms, coordinating validation and submission events. There's also a range of built-in input components which we can take advantage of: And of course, we wouldn't get very far without being able to validate form input, and Blazor has us covered there as well.
Increase productivity and cut cost in half! Give it a try for free. Out of the box, Blazor gives us some great components to get building forms quickly and easily. The EditForm component allows us to manage forms, coordinating validation and submission events. There's also a range of built-in input components which we can take advantage of:
The source code for this component can be found here: https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
