Gist for Uploading Multiple Files to Azure - react

ParentComponent.ts

const callback = (callbackData: any, file: any) => {
          console.log('callbackData', callbackData);
          console.log('file', file);
        };
        const data = await uploadMultipleFilesToAzure(
          result,
          handleProgress,
          callback
        );
        const promiseData = await Promise.all(data);
        console.log('promiseData', promiseData);

UploadAzureMultiple.tsx

export const uploadMultipleFilesToAzure = (
  uploadData: UploadMultipleToAzure[],
  handleProgress: (
    loadedBytes: number,
    fileData: UploadMultipleToAzure['fileData']
  ) => void,
  callback: any
) => {
  const PIPELINE = newPipeline(new AnonymousCredential(), {
    retryOptions: { maxTries: 4 }, // Retry options
    keepAliveOptions: {
      // Keep alive is enabled by default, disable keep alive by setting false
      enable: false,
    },
  });

  let blockBlobClient: BlockBlobClient;
  const promises: { [key: string]: Promise<BlobUploadCommonResponse> }[] = [];
  forEach(uploadData, (uploadItem) => {
    blockBlobClient = new BlockBlobClient(uploadItem.BlobURL, PIPELINE);
    promises.push({
      [(uploadItem.fileData as FileWithPath).name]: blockBlobClient.uploadData(
        uploadItem.fileData as Blob,
        {
          blockSize:
            (uploadItem.fileData as Blob).size > 1024 * 1024 * 32
              ? 1024 * 1024 * 4
              : 1024 * 512,
          maxSingleShotSize: 1024 * 512,
          concurrency: 20, // 20 concurrency,
          onProgress: (ev: TransferProgressEvent) =>
            handleProgress(
              ev.loadedBytes / (uploadItem.fileData as Blob).size,
              uploadItem.fileData
            ),
        }
      ),
    });
  });
  return promises.map((pro) => {
    const file = (uploadData.find(
      (uploadItem) => pro[(uploadItem.fileData as FileWithPath).name]
    ) as UploadMultipleToAzure).fileData;
    return pro[(file as FileWithPath).name].then((dataPromise) =>
      callback(dataPromise, file)
    );
  });
};