Advanced button customization

FAQ
1

Besides simple changing the button color, you can completely change its appearance – change the font, add borders, hower and click animations and other stuff that can be done with CSS. For example,

.uploadcare--widget__button_type_open {
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  padding: 1px 14px;
  background-color: #e22092;
  background: linear-gradient(#e85eac, #e02a91);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-transition: -webkit-transform 0.25s;
  -moz-transition: -moz-transform 0.25s;
  transition: transform 0.25s;
}

.uploadcare--widget__button_type_open:hover {
  background: linear-gradient(#e14296, #d71876);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
}

.uploadcare--widget__dragndrop-area {
  line-height: 3.4;
  margin-top: -1.8em;
}

See this live demo that shows how to make the widget button look completely different.

  • It helps :+1:
  • It doesn’t help :-1:

0 voters

2

Can I change the look and feel of the button, Let’s say I just wanted to display Icon of viedo recorder, or a file upload Icon. Is that possible?

3

Hi @dnew100,

Thanks for the question! Yes, it’s possible. You can use locale translation to replace the default button text with an <img> element that renders an icon:

UPLOADCARE_LOCALE_TRANSLATIONS = {
  buttons: {
    choose: {
      files: {
        one: '<img src="/path_to_icon/icon.svg" width="30" height="45">'
      }
    }
  }

Check out a lice demo here.

4

Hi, does this work with the new File Uploader?

While this works for me…

 const config = document.querySelector("lr-config");
      config?.localeDefinitionOverride = {
        en: {
          "upload-file": "Choose your documents",
        },

I wasn’t clear on how to replace the button. This did not work:

      const config = document.querySelector("lr-config");
      config?.localeDefinitionOverride = {
        en: {
          buttons: {
            choose: {
              files: {
                one: '<img src="https://www.google.com/logos/doodles/2024/mothers-day-2024-may-12-6753651837110364-2x.png" width="30" height="45" class="icon-image">',
              },
            },
          },
        },
      };

I was using these docs as my reference.
Thanks for any insights!

5

Hello Anders.
This doesn’t work with the new file uploader and probably won’t - it’s more a hack and not an expected functionality.
To style the button this way you can create an image with attached API call initFlow to it: File Uploader API

Here’s an example of how to do that with simple button. You can use an image instead of it: https://codesandbox.io/p/sandbox/localization-example-x8kgmc

6

Thanks. I solved it with just some old-school css overrides, but I’ll also take a look at your example.

1 Like