Custom PreviewComponent with TypeScript?

[cbw]

Has anyone gotten a custom PreviewComponent for UploadPreview to work in TypeScript?

I've been working off Yoav's example, however TypeScript is giving complaints like Property 'url' does not exist on type 'PropsWithChildren<WithRequestPreSendUpdateProps>'. for all of the ItemPreviewWithCrop props other than id.

I dug around Github for examples of anyone using this component successfully in TypeScript, but can't find any.

I published a TypeScript version of Yoav's example here. The errors are in lines 75-80 and 148.

[yoavniran]

Hey @cbw this is most likely an issue with typings on Uploady's side.
I'll create an issue from this discussion to fix.

[yoavniran]

@cbw I checked the issue and it looks like actually an implementation issue (rather than internal one).

You should add the following interface to your app:

interface PreviewWithCropProps extends WithRequestPreSendUpdateProps, PreviewComponentProps {
}

And modify your App's code to use it like this:

const ItemPreviewWithCrop = withRequestPreSendUpdate((props: PropsWithChildren<PreviewWithCropProps>) => {
//...
}

Hopefully this solves it for you.

[cbw]

Thanks, @yoavniran for looking into this!

I implemented those changes, however getting a TypeScript error on the interface definition:

Interface 'PreviewWithCropProps' cannot simultaneously extend types 'WithRequestPreSendUpdateProps' and 'PreviewComponentProps'. Named property 'url' of types 'WithRequestPreSendUpdateProps' and 'PreviewComponentProps' are not identical.

[cbw]

Scratch that – was something stupid I did while trying to debug. This appears to be working, thanks again!