[REACT] Cannot disable or hide file picker badge

[digmer]

I have a widget in my action column that looks like this:

                          {
                            type: 'filepicker',
                            cls: 'invoice-file-picker',
                            itemId: 'upload-invoice-attachment-button',
                            badge: null,
                            fileFieldConfig: {
                              badge: null,
                            },
                            buttonConfig: {
                              text: 'Upload Invoice',
                              cls: 'b-green b-raised',
                              badge: null,
                            },
                            listeners: {
                              change: async ({ source: btn, files: files }) => {

                            // Upload file
                          },
                        },
                      },

I am able to select the file picker button and change its appearance like this:

.custom-grid-inner-body .invoice-file-picker .b-green.b-raised {
  color: white !important;
  background-color: rgb(128, 0, 43) !important;
  border-radius: 30px !important;
}

However, nothing I've tried disables the badge that appears on the file picker. Please give me some advice on how to approach this.

[marcio]

Hey digmer,

Thanks for reaching out and welcome to our forums!

Could you please clarify a little bit regarding what you mean by disabling the badge? Do you mean not showing or changing the CSS/look of it in a specific way?

[digmer]

I would like to hide it entirely, but only for this specific filepicker/button.

[marcio]

Hey digmer,

You can use the following CSS rule:

.invoice-file-picker.b-badge:before {
	display: none;
}

I tested on our demo here (I added the invoice-file-picker to the picker)https://bryntum.com/products/grid/docs/api/Core/widget/FilePicker

[digmer]

Yep, that doesn't work for me.

I can select the file picker with

.invoice-file-picker {
  display: none !important;
}

Nothing I've tried disables the badge.

[digmer]

Can I do it in a renderer somehow? I want the badge and the tooltip from the filepicker gone.

[marcio]

Hey digmer,

The badge is added on a :before CSS rule, so you need to configure with that selector

.invoice-file-picker.b-badge:before {
	display: none;
}

Besides that, I created a ticket to make that configurable (show/hide the badge) https://github.com/bryntum/support/issues/8748 to make it easier to change that.