Is there a way to call an API only once to obtain external IDs for multiple files before upload?

[datta202]

"Is there a way to call an API only once to obtain external IDs for multiple files before upload? For instance, if I select 100 files and need their respective external IDs in one go, such as:

const files = [file1, file2, ..., file100];

// Desired response format
// response = {file1: id1, file2: id2, ..., file100: id100}

I found this hook useRequestPreSend hook. Also I gone through this question here #367. But i cannot call api 100 times to get external id's

So how can I achieve this?

[yoavniran]

Hey @datta202
This question is kinda outside the Uploady scope, but if I had to implement something like this, useRequestPreSend is the right way.

But, it sounds a bit strange that you need to get the IDs on the client from the server before uploading to the server. It sounds like something the Server should assign when its receiving the files.

In any case, it indeed doesnt make sense to call N times for N files being uploaded. Your server should be able to return multiple IDs based on the number of files about to be uploaded. But again, I'd try to solve it at upload instead.

[datta202]

Hi @yoavniran, I managed to fix this problem by using withBatchStartUpdate and react hooks

const BatchOperation = withBatchStartUpdate(
  (props: WithRequestPreSendUpdateWrappedProps) => {
    const allExternalIds = getAllExternalIds(externalIds);
    const { updateRequest, requestData } = props;
    const [loading, setLoading] = useState(false);

    const onUpload = useCallback(() => {
      if (requestData && updateRequest && requestData.options.destination) {
        updateRequest({
          items: requestData.items,
        });
      }
    }, [requestData, updateRequest, allExternalIds]);

    useEffect(() => {
      if (!requestData?.options || !requestData?.items) {
        return;
      }

      setLoading(true);

      fetchAllExternalIds();
    }, [requestData?.options, updateRequest, requestData?.items]);

    useEffect(() => {
      if (!allExternalIds) {
        return;
      }
      setLoading(false);

      onUpload();
    }, [allExternalIds]);

    return loading ? showLoading() : null;
  }
);