7

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.

Michael Kossin
  • 342
  • 3
  • 14

1 Answers1

12

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:

enter image description here

You might pick up more tips by studying his source code further.

Jason D
  • 1,863
  • 2
  • 16
  • 30
  • This is nice thanks and looking at the linked source code also helped. The one minor glitch I still have with this solution is that the (hidden) area of the "file-input-zone" that contains the "Choose File" button (not the text showing the file name or "no file" message) does not show a pointer cursor when you hover over it, like your "Get me a file!" example does. How did you solve that? I notice the "Drag Drop example in linked code has the same issue. – Stuart Helwig Aug 10 '21 at 21:56
  • @Stuart, please look close at the CSS in my example. I suspect "cursor: pointer" is what you are missing. Note: you need this in two places – Jason D Aug 12 '21 at 14:01
  • Thanks for your reply @Jason. I do have the cursor style set in the same way. I can alter the size of the input and make is visible and see that the cursor only changes back to the default pointer when hovering over that "button". I can also make the whole file-input-zone very large and only the small area of the input behaves this way. (Same thing occurs in the drag drop sample in the source code you linked to.) But clearly you example works, so it's quite intriguing. Might try some different browsers. (Only used Chrome - but you sample works there too.) :-( – Stuart Helwig Aug 14 '21 at 02:13
  • 1
    @Stuart, I think it is best if you open a new question in SO with a minimally reproducible example. This is the best way for someone in the community to help you. https://stackoverflow.com/help/minimal-reproducible-example – Jason D Aug 16 '21 at 15:57