Type Safety UploadPreview and withRequestPreSendUpdate

[Tekpakma]

Hi, I was playing around with code, similar to this example:
https://react-uploady.org/docs/guides/Crop/

I wasn't able to properly make the Preview Typesafe without some Type Assertions. The Problem seems to be the combination with withRequestPreSendUpdate.
I'm not as TS expert, so I'm looking for some help how to go about it.

[yoavniran]

Hi @Tekpakma
Please share your code, preferably in a sandbox, so I can try and help.
Im by no means a TS expert either but maybe others could help too

[Tekpakma]

HI @yoavniran .
Tried to spin up a TS Sandbox, run into some package type error, idk. This code would be sufficient to show the behaviour:

import React from "react";
import Uploady, { withRequestPreSendUpdate } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";

const ItemPreviewWithCrop = withRequestPreSendUpdate((props) => {
  const { url, isFallback, updateRequest, requestData } = props;
  console.log(url, isFallback, updateRequest, requestData);
  return null;
});

export default function App() {
  return (
    <Uploady multiple={false} destination={{ url: "my-server.com/upload" }}>
      <UploadButton />

      <UploadPreview
        rememberPreviousBatches
        PreviewComponent={ItemPreviewWithCrop}
        fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"
      />
    </Uploady>
  );
}

Error 1 would be the assumed type of withRequestPreSendUpdate (WithRequestPreSendUpdateProps), which doesnt contain some props.

Error 2 would be on PreviewComponent: "FC<Omit<WithRequestPreSendUpdateProps, "updateRequest" | "requestData">>" cant be assigned to the type "ComponentType ... and other stuff here

This would kinda fix it:
const ItemPreviewWithCrop = withRequestPreSendUpdate<PreviewComponentProps>(
But id is not available on PreviewComponentProps

[yoavniran]

Take a look at: https://github.com/rpldy/react-uploady/blob/master/packages/ui/upload-preview/types/index.test-d.tsx#L103

See if it helps

[Tekpakma]

It does. Ty!