Upload file with signed URL + endpoint

uploadFile.js

import _ from 'lodash'
import { gql } from '@apollo/client'

const THROTTLE_CAP = 750

const signFileUploadMutation = gql`
  mutation SignFileUpload (
    $fileName: String!
    $type: FileUploadType!
  ) {
    signFileUpload(
      fileName: $fileName
      type: $type
    ) {
      bucketFolder
      bucketName
      fileBucketLocation
      uniqueFileName
      signedUrl
      url
    }
  }
`
export const getSignedUrl = async (apolloClient, fileName, type) => {
  const signedUrlRes = await apolloClient.mutate({
    mutation: signFileUploadMutation,
    variables: {
      fileName,
      type
    }
  })
  return signedUrlRes?.data?.signFileUpload
}

const xhrWithProgress = ({
  url,
  method = 'PUT',
  onProgress,
  file
}) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        resolve(xhr)
      } else {
        reject(xhr)
      }
    }
  }
  const handleProgress = (e) => {
    if (e.lengthComputable) {
      const percentage = (e.loaded / file.size) * 100
      onProgress(percentage)
    }
  }
  
  if (onProgress) {
    xhr.upload.addEventListener('progress', _.throttle(handleProgress, THROTTLE_CAP))
  }
  
  xhr.onerror = (error) => {
    reject(error || new Error('An error happened with uploading'))
  }
  
  xhr.open(method, url)
  xhr.send(file)
})

export const uploadFile = async (apolloClient, file, type, onProgress) => {
  const res = await getSignedUrl(apolloClient, file.name, type)
  const signedUrl = res?.signedUrl
  const url = res?.url
  
  if (!signedUrl || !url) {
    throw new Error('Unknown')
  }
  
  await xhrWithProgress({
    url: signedUrl,
    method: 'PUT',
    onProgress,
    file
  })
  
  return res
}