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.
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 01 Answer
Reset to default 0The 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;
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745642016a4637748.html
评论列表（0条）