Blazor Upload - Replace Upload Button with Icon

Radzen Studio Blazor Server
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