Blazor Upload - Replace Upload Button with Icon

Radzen Studio Blazor Server
1

I created a form and placed a paperclip for the user to use when they want to upload a file.
! would like to suppress the default Radzen upload button and instead have a click event on the paperclip initiate the file selection through the Radzen control.

I have tried setting the ElementReference to the Radzen upload control and raising the click event (simulating a user clicking on the hidden control), but the upload control will not bind to Element Reference.

Any insights are much appreciated.

image|690x87

1 Like
2

Hi @Dave_Anderson,

ElementReference doesn't work with the RadzenUpload because it isn't an element - it is a Blazor component. ElementReference works with regular HTML elements. If you want to capture a reference to a blazor component you have to use its type e.g.

<RadzenUpload @ref="upload" />
@code {
    RadzenUpload upload;
}

Other than that the RadzenUpload does not have a method that opens the "Select file" dialog. The thing is RadzenUpload uses <input type="file"> under the hood which has no API for opening that dialog because it is considered a security risk.

There is something you can do though - style RadzenUpload to display an icon. Here is how to do that.

  1. Set a custom css class <RadzenUpload class="custom-upload" />
  2. Add this CSS to your site.css file
// Remove outer padding and background

.custom-upload .rz-fileupload-buttonbar {
    padding: 0;
    background: none;
}

// Hide the "Choose" text
.custom-upload .rz-button-text {
    display: none;
}

// Remove background and padding from the button
.custom-upload .rz-fileupload-choose {
    background: none;
    padding: 0 !important;
}

// Remove styling applied when the user clicks the button
.custom-upload .rz-fileupload-choose:active {
    background: none !important;
    box-shadow: none !important;
}

// Icon styling
.custom-upload .rz-button-icon-left {
    display: inline-block !important;
    color: #000;
    font-size: 32px !important;
    width: 32px !important;
}

// Specify the icon itself - Material Icons 'attach_file'
.custom-upload .rz-button-icon-left::before {
    content: 'attach_file';
}

This will make the upload display only an icon.

1 Like
3

Thank you much for the prompt response and code sample. Very appreciative. Regards.

4

Thank you for this example, I was unable to get this to work. Do you know if this would still work? If so, it's probably just me.

5

It should probably work if you update the CSS classes to use the new prefix - .rz- instead of .ui-

1 Like
6

Thank you! It did work by changing the prefix!

7

Hello, I know this is an older post but it is the most relevant place for me to ask this:

I am wondering if a material-icon-only upload control is still possible since the RadzenUpload component code and specified classes have since been changed with "Standard theme added (#294)". To be specific, the empty span that contained the class (rz-button-icon-left) we were targeting with the CSS above, no longer exists for the RadzenUpload control and have had no luck successfully changing the CSS to getting the material icon image to show based on other class identifiers.

Please let me know if this is still possible as I, as well as my users, really enjoyed the smaller footprint of the a material icon version of the radzenupload control.
If this is no longer possible, I do believe that adding this functionality this would make a great feature that many would enjoy!

Thank you!

8

We have the same issue like Patrick. After updating the library to the latest version (3.18.12) the icon will not be shown any more. Do you have any new solution or workaround to display only an icon?

9

With the next release of Radzen.Blazor we will support setting an icon:

<RadzenUpload ChooseText="" Icon="upload" />
10

This is fantastic news, I look forward to getting my hands on it with the next release! Thank you!