admin管理员组

文章数量:1434900

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
Share Improve this question edited Nov 17, 2024 at 8:39 rozsazoltan 11.6k6 gold badges21 silver badges61 bronze badges asked Nov 16, 2024 at 22:06 NormalNormal 3,8277 gold badges37 silver badges84 bronze badges 0
Add a comment  | 

1 Answer 1

Reset to default 0

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;

本文标签：

版权声明：本文标题：reactjs - How can I change the default &quot;Upload file&quot; button to a custom component in upload care? - Stack Over 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745642015a2667913.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。