Function UploadProgress

example/withSuspense/Storage.tsx:12–20

({ uploadTask, storageRef })

import type { UploadTaskSnapshot, UploadTask, StorageReference } from 'firebase/storage';

const UploadProgress = ({ uploadTask, storageRef }) => {
  const { data: uploadProgress } = useStorageTask<UploadTaskSnapshot>(uploadTask, storageRef);

  const { bytesTransferred, totalBytes } = uploadProgress;

  const percentComplete = Math.round(100 * (bytesTransferred / totalBytes)) + '%';
  console.log(`Uploading image: ${percentComplete} complete`);
  return <span>{percentComplete}</span>;
};

const ImageUploadButton = (props) => {
  const [uploadTask, setUploadTask] = useState<UploadTask | undefined>(undefined);