Adding a custom tab in React

Questions / Help
1

Hi!

I’m having a hard time adding a custom tab in React.

I have a working codepen of an UploadCare widget in React. I was hoping someone could help me bridge the gap between the JS example and integrating this in React… :pray:

Thanks!

2 Likes
2

Hi @guillaumegaluz

We have a demo that shows how to use Uploadcare widget with React, but it doesn’t demonstrates how to use custom tabs. Have you already checked it out?

Actually, you can add a custom tab constructor function after this line and then call

uploadcare.registerTab(name, constructor);

Let us know if this doesn’t help.

3

Hey Alex ~

I was able to fix this by adding button[0].title = 'Gallery' inside the constructor as you recommended. Without this the tab is not displayed. I just made a pull request to the uploadcare/uploadcare-widget-react-demo repository to add an example with a custom tab, I think it could be useful to other people since it’s not in the documentation.

There’s a follow up though, namely being able to build the custom tab (menu item + panel) with React instead of jQuery.

I have a codepen with a proto version working but there are a few questions I have for you:

  1. Finding the container: I found a way with:
ReactDOM.render(
  <FavoriteTab />,
  document.getElementsByClassName('uploadcare--tab_name_favorite')[0]
);

but I feel this is a bit hacky. Is there a different way, using container maybe?

  1. Menu Item Icon How can I change the icon in a simple way? It’s unclear how to replace the svg. I’ve tried doing this like
 $(button[0]).html(<svg>...</svg>)

but this flushes the menu item text which is in :after pseudoclass.

  1. OnClick handler. When I add the same callback as with jQuery in JSX it doesn’t appear to get fired:
<img
  key={index}
  src={'https://ucarecdn.com/' + uuid + '/-/scale_crop/280x280/center/'}
  onClick={() => dialogApi.addFiles([uploadcare.fileFrom('uploaded', uuid, settings)]) } />

I would love to get some help from someone who has integrated the widget with React. I’m happy to make a pull request towards the repo or the demo repo once we’ve found the best way to integrate it.

Again, thanks for your help!

Guillaume

4

@nd0ut Alex, can you take a look, please? :arrow_up:

5

Hey! I have a great news. We just released an alpha version of our react wrapper around uploadcare widget.

Here it is available on NPM: @uploadcare/react-widget - npm
No documentation yet, but we’re working on it.

Meanwhile I’ve sketched out a basic example of its usage with custom tabs on the Codesandbox: frosty-blackwell-do8cq - CodeSandbox

Try it out! You’ll be the first user of react-widget so we’ll be very happy to get any feedback!

2 Likes
6

This is great. Works like a charm!

Could you expose a prop to allow changing the text of “Choose a file”? Right now the only way is with UPLOADCARE_LOCALE_TRANSLATIONS in

7

Also, what is the equivalent of

dialogApi.addFiles([uploadcare.fileFrom('uploaded', uuid, settings)])

now?

Any chance you could render an image and add an onClick handler in your CodeSandbox?

8

@guillaumegaluz the current implementation of the widget allows defining custom translations via the UPLOADCARE_LOCALE_TRANSLATIONS global variable only, so I think there’s no way to this via a prop.

@nd0ut can you help with the second question? I know how to do this with vanilla JS but have no idea how to implement it in React (it seems it’s about time to take some React courses :grinning: ).

10

Yep, you can manage translations via UPLOADCARE_LOCALE_TRANSLATIONS only. But we’re working on the prop-wrapper over it, so it would be in react way.

As for the dialogAPI, you can get it inside custom tab. I’ve updated sandbox, added button which calls dialogApi.addFiles.

11

@Alex Can I customize the icon of an existing tab?
For example, the Icon of the “Direct Link” tab…
I want to use this one:
image

12

@Daniel_Fernando_Gome yes, it’s possible. Here’s how you can do this

<svg width="0" height="0" style="position:absolute">
  <symbol id="uploadcare--icon-file" viewBox="0 0 32 32">
    <path d="M 16 22.928 L 23.416 27.4 L 21.454 18.965 L 28 13.292 L 19.37 12.552 L 16 4.6 L 12.629 12.552 L 4 13.292 L 10.546 18.965 L 8.584 27.4 Z"/>
  </symbol>
</svg>

Where file in the id attribute uploadcare--icon-file is a tab name.

13

Brilliant! Thank you very much @Alex. You solved in a couple of minutes what I had been looking for for days. :sweat_smile:

1 Like