Function UploadProgress

example/withoutSuspense/Storage.tsx:12–24

({ uploadTask, storageRef })

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

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

  if (status === 'loading') {
    return <LoadingSpinner />;
  }

  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);