How can I change the default "Upload file" button to a custom component in upload care?

import { FileUploaderRegular } from '@uploadcare/react-uploader/next'

<FileUploaderRegular
  sourceList="local, url, camera, gdrive"
  pubkey={process.env.NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY!}
  multiple={false}
/>

Currently it renders the following as in the image:

I want to have something like a custom component where if it was clicked, it will open the modal.

For example this is my use case:

I wanted to have my custom component to have the users to click on, but I found not way to hide the default upload button and show my own trigger element.

How can I change the default "Upload file" button to a custom component in upload care?

import { FileUploaderRegular } from '@uploadcare/react-uploader/next'

<FileUploaderRegular
  sourceList="local, url, camera, gdrive"
  pubkey={process.env.NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY!}
  multiple={false}
/>

Currently it renders the following as in the image:

I want to have something like a custom component where if it was clicked, it will open the modal.

For example this is my use case:

I wanted to have my custom component to have the users to click on, but I found not way to hide the default upload button and show my own trigger element.

• reactjs
• next.js
• uploadcare

1 Answer 1

The default uploader button can be hidden with CSS

lr-simple-btn {
  display: none;
}

After that, the uploader dialog can be triggered via the JS API by calling the initFlow() method. For example,

import { FileUploaderRegular } from "@uploadcare/react-uploader";
import "@uploadcare/react-uploader/core.css";
import { useRef } from "react";

function Uploader() {
  const uploaderRef = useRef(null);

  return (
    <div>
      <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY" />
      <button
        onClick={() => {
          uploaderRef.current.initFlow();
        }}
      >
        Upload file
      </button>
    </div>
  );
}

export default Uploader;