Custom sender

[ted-dino]

Hi again @yoavniran . This question is related to this. im wondering if it's possible to implement a custom sender because each of these imports has different API endpoints and requires different parameters to be sent to the server. i also found this discussion here , and it seems to be related to what im trying to understand. i would greatly appreciate it if you could let me know if customization is possible. thank you for creating this fantastic library. and, please feel free to request any additional information if needed, English is not my native language but i will try my best to explain things 🙂.

[yoavniran]

hey @ted-dino thanks!

I'm not sure you need a custom sender. Unless those uploads dont use conventional http endpoints to receive the files or in case you need to leverage a 3rd party sdk.

Meaning, you should be able to configure the upload by leveraging properties (ex: params, sendWithFormData, method) and if needed, the preSendRequest (event, hook)

Please expand a little more on what it is that you actually need to customize and we'll see what will be the best solution.

If you know you need a custom sender, you can look at a few existing implementation such as:

1. Uploady's Chunked-Sender - https://github.com/rpldy/react-uploady/blob/master/packages/core/chunked-sender/src/chunkedSender/createChunkedSender.js
2. Drive-Uploady - https://github.com/rpldy/drive-uploady/blob/master/src/getDriveSender.js

To get a better sense of what's required by implementing a new sender.

[ted-dino]

Hello @yoavniran,

I wanted to share the endpoints for reference

For importing orthophotos:

• Endpoint: <API_URL>/project/geotiff
• Required parameter: project_id

For importing point clouds:

• Endpoint: <API_URL>/project/create
• Required parameters: name, type, project_id, and 5 more params.

I hope this information is helpful. Thank you.

[yoavniran]

Based on this, it seems like a custom sender is definitely an overkill.

A simpler solution would be to customize the upload with the upload button props. Notice that it accepts most of the Uploady provider props.

So you can have:

import UploadButton from "@rpldy/upload-button"

 <label>Upload Orthophotos</label>
 <UploadButton destination={{ url: "<API_URL>/project/geotiff", params: { project_id: "<PROJECT_ID>" } }} />

 <label>Upload Point Clouds</label>
 <UploadButton destination={{ url: "<API_URL>/project/create", params: { project_id: "<PROJECT_ID>", name: "...", ... } }} />

The other components like the upload-drop-zone support the same props.

If you wish to use your own components, simply call the context's upload method with the correct params:

import { useUploady } from "@rpldy/uploady";

const MyComponent = ({ file, url, params }) => {
   const { upload } = useUploady();
  
   const onClick = () => {
      upload(file, { destination: { url, params } });  
   }
return   <button onClick={onClick)>upload</button>;
};

Of course, you can be more dynamic and set these params with the useRequestPreSend hook with a single upload button if you're able to determine the type of the upload by another way (ex: file extension).

[ted-dino]

oh nice! i didnt know that i can also pass UploadyOptions props to UploadButton. i just saw this
In addition, most UploadOptions props can be passed to UploadButton, in order to override configuration passed to the parent Uploady component. See [Uploady documentation](https://react-uploady.org/docs/api/#props) for detailed list of upload options.

thank you so much for this @yoavniran !

[ted-dino]

Hi @yoavniran, its me again. i followed your suggestion but now my problem is the events hooks are not firing. i also updated the package to version 1.6.0. here is my code.

const PointCloud = (props: ButtonProps) => {
  const { togglePopover } = useDropdownEvents();
  const abortItem = useAbortItem();
  const abortAll = useAbortAll();
  const fileEvents = useFileEvents();
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const queryClient = useQueryClient();
  const API_URL = process.env.NEXT_PUBLIC_API_URL;
  const { projectInfo } = props;

  const { id, epsg, elevation_resolution, survey_type, area_type } =
    projectInfo;

  useEffect(() => {
    /* SOURCE: https://www.kindacode.com/article/react-how-to-check-internet-connection-online-offline/ */
    const handleStatusChange = () => {
      setIsOnline(navigator.onLine);
    };

    window.addEventListener("online", handleStatusChange);
    window.addEventListener("offline", handleStatusChange);

    return () => {
      window.removeEventListener("online", handleStatusChange);
      window.removeEventListener("offline", handleStatusChange);
    };
  }, [isOnline]);

  useBatchAddListener((batch) => console.log(batch));

  useBatchProgressListener((batch) => {
    fileEvents.setFiles(batch.items);
  });

  useBatchFinishListener((batch) => {
    const errorStates = ["aborted", "cancelled", "error"];
    const allSuccess = batch.items.every(
      (item) => !errorStates.includes(item.state),
    );

    if (allSuccess) {
      Alert.success("Point Cloud added successfully");
      togglePopover(false);
      fileEvents.setUploadState(FILE_STATES.FINISHED);
      queryClient.invalidateQueries({ queryKey: ["pointclouds"] });
    }
  });

  useItemStartListener((item) => {
    const allowedExtensions = props.fileType
      .split(",")
      .some((extension) => item.file.name.endsWith(extension));
    if (isOnline) {
      if (!allowedExtensions) {
        abortItem(item.id);
        Alert.warning(
          `Invalid file format. The file ${item.file.name} is not supported.`,
        );
      } else {
        fileEvents.setUploadState(FILE_STATES.ADDED);
      }
    } else {
      Alert.error("There was an error during uploading. Please try again.");
      abortAll();
      fileEvents.setUploadState(FILE_STATES.ABORTED);
    }
  });

  useItemAbortListener((item) => {
    if (!isOnline) {
      Alert.warning(
        `${item.file.name} was aborted due to network issues. Please try again.`,
      );
      fileEvents.setUploadState(FILE_STATES.ABORTED);
    } else {
      Alert.warning(`${item.file.name} was aborted.`);
    }
  });

  useItemProgressListener((item) => {
    if (fileEvents.fileID === item.id && item.completed !== 100) {
      abortItem(fileEvents.fileID);
    }
  });

  useItemErrorListener((item) => {
    if (item?.uploadResponse?.data["detail"]) {
      Alert.error(item.uploadResponse.data["detail"]);
      fileEvents.setUploadState(FILE_STATES.ABORTED);
    }
  });

  const filterByFileType = useCallback((file: File) => {
    const allowedExtensions = props.fileType
      .split(",")
      .some((extension) => file.name.endsWith(extension));
    if (!allowedExtensions) {
      Alert.warning(
        `Invalid file format. The file ${file.name} is not supported.`,
      );
    } else {
      return file;
    }
  }, []);

  return (
    <UploadButton
      destination={{
        url: `${API_URL}project/create/`,
        params: {
          name: projectInfo
            ? `Point Cloud ${projectInfo.imports.length + 1}`
            : "Point Cloud 1",
          epsg,
          elevation_resolution,
          survey_type,
          area_type,
          parent_project: id,
        },
      }}
    >
      {props.name}
    </UploadButton>
  );
};

export default PointCloud;

here is my dependecies.
  "dependencies": {
    "@rpldy/mock-sender": "1.6.0",
    "@rpldy/retry-hooks": "1.6.0",
    "@rpldy/sender": "1.6.0",
    "@rpldy/upload-button": "1.6.0",

here is my sample code
https://stackblitz.com/edit/stackblitz-starters-3wa864?file=pages%2FCustomButtom.js

[ted-dino]

never mind. found a solution using this useUploady hook. will provide a sample later using a popover for someone trying to implement the same feature.

[yoavniran]

Great. i cant see from the example you put here above, but a common pitfall is using the event hooks inside components that are dismounted during or immediately after the upload begins. Then they are not called, of course.
The Uploady and the event listeners should be placed inside components that remain mounted throughout the upload process.