Override BaseWeb's File Uploader button label text

Question

Trying to override File Uploader's button text, but ButtonComponent.props has any type, so can't figure out what I am able to pass there. My idea inspired by Button docs was to set children property, but button text remains unchanged. Could anyone give a hint?

import { FileUploaderProps, FileUploader } from 'baseui/file-uploader';
import React, { FC } from 'react';

const StyledFileUploader: FC<FileUploaderProps> = (props) => {
  return (
    <FileUploader
      {...props}
      overrides={{
        ButtonComponent: {
          props: {
            children: 'text',
            overrides: {
              BaseButton: {
                children: 'text',
                props: {
                  children: 'text',
                },
                style: () => ({
                  backgroundColor: '#A4A4A4',
                  color: '#fff',
                  borderRadius: '2px',
                  paddingTop: '3px',
                  paddingRight: '22px',
                  paddingBottom: '3px',
                  paddingLeft: '22px',
                  fontSize: '16px',
                  lineHeight: '20px',
                  ':hover': {
                    backgroundColor: '#A4A4A4',
                    color: '#fff',
                  },
                }),
              },
            },
          },
        },
        FileDragAndDrop: {
          style: () => {
            return {
              backgroundColor: 'transparent',
              borderLeftColor: 'transparent',
              borderRightColor: 'transparent',
              borderTopColor: 'transparent',
              borderBottomColor: 'transparent',
            };
          },
        },
        ContentMessage: {
          style: () => {
            return {
              display: 'none',
            };
          },
        },
      }}
    />
  );
};

export default StyledFileUploader;

score 2 · Accepted Answer · answered Dec 12 '20 at 12:12

I doubt you can without overriding the whole component. This is weird exception for the children props.

Have a look at this minimal example. startEnhancer will be respected, children not:

import { FileUploader } from "baseui/file-uploader";
import React from "react";

const StyledFileUploader = (props) => {
  return (
    <FileUploader
      {...props}
      overrides={{
        ButtonComponent: {
          props: {
            startEnhancer: "I'm here!",
            children: "I won't be..."
          }
        }
      }}
    />
  );
};

export default StyledFileUploader;

The reason can be found in the implementation:

FileUploader gives Button the overrides props here
Button ifself passes its own props (this.props) to ButtonInternals here
ButtonInternals renders its children and some other stuff here

But FileUploader passed {locale.fileuploader.browseFiles} to the Button as children here, which is after the overrides (and therefore overrides the overrides...)

You may want to file a bug report (so children gets put before the override props in FileUploader) or just override the whole button component.

*just* override the whole button component is not an option since it loses click handler - dialog window won't be opened with custom component. therefore, there is no use for this component at all after this change? — Yehor Androsov, Dec 13 '20 at 13:15
actually, I've found out that it accepts FC with props parameter as well. I will post my answer as well. Thanks! — Yehor Androsov, Dec 13 '20 at 13:18

score 2 · Answer 2 · answered Dec 13 '20 at 13:23

With the help of accepted answer, I figured out how to override button component. Originally I thought it was not possible (due to component losing click handlers), but props is actually carrying it, so we can use <Button {...props}

export const StyledFileUploader: FC<FileUploaderProps> = (props) => {
  return (
    <FileUploader
      {...props}
      overrides={{
        ButtonComponent: (props) => (
          <Button
            {...props}
            overrides={{
              BaseButton: {
                style: () => ({
                  backgroundColor: '#A4A4A4',
                  color: '#fff',
                  borderTopRightRadius: '2px',
                  borderTopLeftRadius: '2px',
                  borderBottomRightRadius: '2px',
                  borderBottomLeftRadius: '2px',
                  paddingTop: '3px',
                  paddingRight: '22px',
                  paddingBottom: '3px',
                  paddingLeft: '22px',
                  fontSize: '16px',
                  lineHeight: '20px',
                  ':hover': {
                    backgroundColor: '#A4A4A4',
                    color: '#fff',
                  },
                }),
              },
            }}
          >
            Upload
          </Button>
        ),
        FileDragAndDrop: {
          style: () => {
            return {
              backgroundColor: 'transparent',
              borderLeftColor: 'transparent',
              borderRightColor: 'transparent',
              borderTopColor: 'transparent',
              borderBottomColor: 'transparent',
            };
          },
        },
        ContentMessage: {
          style: () => {
            return {
              display: 'none',
            };
          },
        },
      }}
    />
  );
};

score 1 · Answer 3 · answered Dec 22 '20 at 20:17

1

To change any text, you should use LocaleProvider: https://baseweb.design/guides/internationalization/

Overriding / replacing components should be the last resort.

answered Dec 22 '20 at 20:17

tajo

611
4
3

thanks, nice suggestion, have not thought about it. guess it won't work if we need different labels on multiple components – Yehor Androsov Dec 24 '20 at 06:37
why? you can have multiple LocaleProviders in the same app – tajo Dec 26 '20 at 19:21
yes.. I see your point now. Thanks for clarification. – Yehor Androsov Dec 26 '20 at 20:23

Override BaseWeb's File Uploader button label text

3 Answers3