Hide the Upload File List

Environment

Product

FileSelect for Blazor, Upload for Blazor

Description

How to apply custom CSS styles to the FileSelect and Upload components?

How to hide the selected files list? How to remove, hide or disable the filename list below the "Select Files" button?

How to resize or remove the frame around the FileSelect and Upload button?

Solution

Add a custom CSS class to the FileSelect / Upload and override the theme styles.

1. Set the Class parameter. The custom class will render in the <div class="k-upload"> element.
2. Implement custom styles, which remove the component border, padding, file names, status icon.

Apply custom CSS styles to FileSelect and Upload

FileSelect:
<TelerikFileSelect Class="button-only" />

Upload:
<TelerikUpload Class="button-only" />

<style>
    .k-upload.button-only {
        /* remove component border */
        border-width: 0;
        /* prevent expansion to 100% */
        display: inline-block;
    }

    .k-upload.button-only .k-dropzone {
        /* remove space around button */
        padding: 0;
        /* remove background around button */
        /* use if Upload status below is NOT hidden */
        background-color: transparent;
    }

    /* hide selected files */
    .k-upload.button-only .k-upload-files,
    /* hide Upload status */
    .k-upload.button-only .k-upload-status,
    /* hide drop hint */
    .k-upload.button-only .k-dropzone-hint{
        display: none;
    }
</style>