useUploadTask

import { useUploadTask } from 'refirebase/react';

function AvatarUploader() {
  const { upload, progress, state, result, error, pause, resume, cancel } = useUploadTask();

  const handleFile = async (e) => {
    const file = e.target.files[0];
    const uploadResult = await upload('avatars/' + file.name, file, {
      downloadUrl: true,
    });
    if (uploadResult) {
      console.log('Uploaded:', uploadResult.downloadUrl);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFile} disabled={state === 'running'} />
      {state === 'running' && (
        <div>
          <progress value={progress} max={100} />
          <button onClick={pause}>Pause</button>
          <button onClick={cancel}>Cancel</button>
        </div>
      )}
      {state === 'paused' && <button onClick={resume}>Resume</button>}
      {state === 'success' && <p>Done! {result?.byteSize} bytes uploaded.</p>}
      {error && <p>Error: {String(error)}</p>}
    </div>
  );
}