Implement an upload control with progress, cancel, and retry states.

Accept one PDF under 10 MB. Keep the selected file after a recoverable failure. Announce coarse progress and allow cancel without calling it an error.

A failed upload at 60% shows Retry; retry uses the same file and starts a fresh request.

• Validate type and size before upload.
• Use a cancellable upload abstraction.
• Throttle visual/announced progress.
• Do not expose storage internals.

I model upload status explicitly instead of combining several booleans. Retry creates a new controller but retains the validated file.

type UploadState =
  | { kind: "idle" }
  | { kind: "ready"; file: File }
  | { kind: "uploading"; file: File; progress: number }
  | { kind: "failed"; file: File; message: string }
  | { kind: "done"; fileId: string };

function selectFile(file: File) {
  if (file.type !== "application/pdf" || file.size > 10_000_000) {
    setValidationError("Choose a PDF under 10 MB.");
    return;
  }
  setValidationError(null);
  setState({ kind: "ready", file });
}

async function upload(file: File) {
  const controller = new AbortController();
  controllerRef.current = controller;
  setState({ kind: "uploading", file, progress: 0 });
  try {
    const result = await uploadFile(file, p => {
      const progress = Math.min(100, Math.floor(p / 10) * 10);
      setState(current => current.kind === "uploading" && current.progress === progress
        ? current : { kind: "uploading", file, progress });
    }, controller.signal);
    setState({ kind: "done", fileId: result.fileId });
  } catch {
    if (controller.signal.aborted) setState({ kind: "ready", file });
    else setState({ kind: "failed", file, message: "Upload failed. Retry when ready." });
  }
}

// Cancel returns to ready; Retry calls upload(state.file) from failed state.
function cancelUpload() { controllerRef.current?.abort(); }
useEffect(() => () => controllerRef.current?.abort(), []);

A discriminated union prevents impossible combinations such as done and failed together. Real progress support depends on the upload transport.

• Cancel near completion.
• Validation fails before network.
• Component unmounts.
• Server rejects an otherwise valid PDF.

• Mock progress deterministically.
• Assert abort is not shown as failure.
• Retry with the same File object.

• Using unrelated booleans.
• Announcing every progress tick.
• Clearing the file after recoverable failure.
• Trusting client file validation on the server.