0

I have this small part of a Blazor page: enter image description here

On the right is the Blazorise FileEdit component. When an image is selected and uploaded the image is displayed in the placeholder. But I don't like the large FileEdit component and I would like to hide it and trigger an file select when I click the placeholder. Triggering image onclick is not an issue, but in that image onclick function I'd like to trigger the fileSelect for the FileEdit. Is this possible? In Blazorise or Blazor?

PitAttack76
  • 2,120
  • 5
  • 31
  • 44

2 Answers2

1

If you look at the source of Blazorise FileEdit.razor, it is based around an:

<input [...] type="file" [...] />

It renders out as

    <div class="custom-control custom-file">
        <input id="0HM6HP5DH8BMU" type="file" class="custom-file-input"></input>
        <label class="custom-file-label" for="0HM6HP5DH8BMU"></label> <!-- shows "Browse" text -->
    </div>

So that gives a common problem many people have.

Based on this answer, you want it the other way around, with some extra css. You'll likely have to create your own Razor Component with it's own .razor.css.

JHBonarius
  • 10,824
  • 3
  • 22
  • 41
0

To do this you would have to create a reference variable of the component using @ref

e.g.

// Blazor 
<Button Clicked="@(()=>UploadField.ShowPicker())"/>
<FileEdit @ref="@UploadField" />

// Code
private FileEdit UploadField { get; set; }
kyotos
  • 1