How would I display a confirmation screen once the user clicks an asUploadButton component?

[jjslocum3]

Hi,

First of all thank you for this very nice, robust set of components. Super impressive, and good of you to spend your time helping out the community.

I have a question about using the asUploadButton hook. Here's my use case: within my app, a user can choose from several places to upload a batch to. This is done by selecting a global dropdown that specifies the upload destination. Since user error is a real thing, I need to show them a confirmation screen. This is easy to do the first time they hit the "upload" screen: a state variable keeps track of whether they have confirmed they're in the right place, conditionally rendering either the confirmation screen (if they haven't confirmed), or the Uploady component (custom UploadButton) if they have confirmed.

But the requirement is that we show the confirmation screen every time. I tried passing an onClick into the asUploadButton component, but that callback is actually called after showFileUpload. Is there any hook to call a method before showFileUpload gets called? Or am I approaching this completely wrong?

[yoavniran]

Thanks @jjslocum3 😄

In your case, I think a custom button will make more sense. In the end, asUploadButton is a very simple component that mainly does one thing and that is, call showFileUpload available from the UploadyContext.

You could create your button component that implements the logic (show confirmation) and when user approves calls the showFileUpload.

You get access to the method using:

import { useUploady} from "@rpldy/uploady"


//...in your component:
const { showFileUpload } = useUploady();

const onClick = () => {
    //custom logic
   showFileUpload();
};