Track image upload progress in graphql mutation

I am running a graphql mutation to upload an image to the server. And operation is done successfully. My only question is that how do i track the progress of image upload on frontend? What percentage of the image size is uploaded? I want to show it in the progressbar in the frontend.
Below is my graphql mutation

const { mutate: addProfilePicture } = useAddProfilePictureMutation<Error>(
graphqlRequestClient(graphqlEndpoint),
{
  onSuccess: (
    _data: AddProfilePictureMutation,
    _variables: AddProfilePictureMutationVariables,
    _context: unknown
  ) => {
    console.log(_data)
  },
}

)