use-file-uploads.ts

use-file-uploads.tsapps/web/src/lib/files/use-file-uploads.tsraw ← files7,459 B← Back to the app
1"use client";
2 
3/**
4 * TASK-0103 — `useFileUploads`: the editor-side upload orchestrator.
5 *
6 * Every upload path (drag-drop on the canvas, paste, the file block's
7 * "Add file" button) calls `start(file, anchor)`:
8 *
9 *   1. fetch the upload cap ONCE per page session (memoized): the plan
10 *      limit ∩ the ORG policy cap (TASK-0133 — the member-facing
11 *      `GET /workspaces/:id/policy/effective`; on failure the plan limit
12 *      alone is used — the presign stays authoritative either way)
13 *   2. `uploadFile` — pre-check → session → XHR PUT (progress + cancel)
14 *      → complete → poll (lib/files/upload.ts)
15 *   3. on first session: insert the `file` block at `anchor` (properties:
16 *      fileId, name) and focus it — the block shows the progress bar
17 *      (lib/files/upload-store.ts) before the bytes are done
18 *   4. on error: a toast with the server message; the block (if inserted)
19 *      shows its error state; cancel mid-transfer removes the block
20 *
21 * The cap is a UI pre-check only — the server re-checks on session
22 * creation (413 FILE_TOO_LARGE is authoritative). Fetching it once per page
23 * session is the spec's requirement (Requirements §1a).
24 */
25import { useCallback, useRef } from "react";
26import { useQuery, useQueryClient } from "@tanstack/react-query";
27import { toast } from "@/stores/ui-store";
28import { apiFetch, blockApi, workspaceApi } from "@/lib/api";
29import { effectiveMaxFileSize } from "./api";
30import { uploadFile, UploadError } from "./upload";
31import { useUploadStore } from "./upload-store";
32 
33export interface UploadAnchor {
34  parentId: string | null;
35  /** Fractional position to insert AT (null = server appends after the last sibling). */
36  position?: string | null;
37  /** When set, the block is UPDATED (replace-in-place) instead of inserted. */
38  updateBlockId?: string;
39  /**
40   * TASK-0104: when set, the upload is a NEW VERSION of that existing file
41   * (sent as `replaceFileId` in the session body). The server re-anchors to
42   * the target file's own page/block and keeps the same fileId — the caller
43   * should still pass the block that references it (updateBlockId) so the
44   * progress bar renders there.
45   */
46  replaceFileId?: string;
47}
48 
49interface RawWorkspace {
50  billingPlan?: string;
51  usageLimits?: { maxFileSize?: number } | null;
52}
53 
54export function useFileUploads(workspaceId: string | null | undefined, pageId: string | null) {
55  const qc = useQueryClient();
56  const lastLimit = useRef<{ ws: string; at: number; max: number } | null>(null);
57  const maxFileSize = useQuery({
58    queryKey: ["files", "plan-limit", workspaceId],
59    queryFn: async () => {
60      // a per-page-session fetch: valid for 5 min after the first read
61      const cached = lastLimit.current;
62      if (cached && cached.ws === workspaceId && Date.now() - cached.at < 5 * 60_000) return cached.max;
63      if (!workspaceId) return effectiveMaxFileSize("free", null);
64      const ws = (await workspaceApi.get(workspaceId)) as unknown as RawWorkspace;
65      // The plan cap (always computed — it is the fallback below).
66      let max = effectiveMaxFileSize(ws.billingPlan ?? "free", ws.usageLimits ?? null);
67      try {
68        // TASK-0133 — the ORG-aware cap: the member-facing effective endpoint
69        // returns org ∩ plan (the SAME computation the presign enforces), so
70        // an org with a lower `maxFileSizeMB` warns here instead of on the
71        // 413. A non-org workspace returns the plan cap unchanged.
72        const eff = await apiFetch<{ effective: { maxFileSizeBytes?: number } }>(
73          `/workspaces/${workspaceId}/policy/effective`
74        );
75        const orgCap = eff.effective?.maxFileSizeBytes;
76        if (typeof orgCap === "number" && orgCap > 0) max = Math.min(max, orgCap);
77      } catch {
78        // fall back to the plan cap — the presign's 413 stays authoritative.
79      }
80      lastLimit.current = { ws: workspaceId, at: Date.now(), max };
81      return max;
82    },
83    enabled: Boolean(workspaceId),
84    staleTime: Infinity,
85    retry: false,
86  });
87 
88  const start = useCallback(
89    async (file: File, anchor: UploadAnchor) => {
90      const max = maxFileSize.data ?? effectiveMaxFileSize("free", null);
91      const ws = workspaceId ?? undefined;
92 
93      const handle = uploadFile(
94        file,
95        {
96          pageId: pageId ?? null,
97          workspaceId: ws,
98          maxFileSize: max,
99          replaceFileId: anchor.replaceFileId,
100          onSession: (fileId) => {
101            // The block appears as soon as the session exists — the progress
102            // bar is visible BEFORE the transfer completes (spec §1). The
103            // cancel handle is registered here too (fileId is known now).
104            useUploadStore.getState().registerCancel(fileId, handle.cancel);
105            const insert = async () => {
106              if (anchor.updateBlockId) {
107                await blockApi.update(anchor.updateBlockId, {
108                  type: "file",
109                  properties: { fileId, name: file.name },
110                });
111              } else {
112                await blockApi.insert({
113                  pageId: pageId as string,
114                  parentId: anchor.parentId,
115                  type: "file",
116                  properties: { fileId, name: file.name },
117                  // an explicit fractional position wins; otherwise the API
118                  // appends after the last sibling of this parent.
119                  ...(anchor.position ? { position: anchor.position } : {}),
120                });
121              }
122              // These calls bypass the invalidating block hooks (this file is
123              // imported by the editor, so it cannot use them without a cycle) —
124              // refresh the page's block query here, or the rendered block
125              // stays "No file yet" until a manual reload (the uploaded file
126              // is already READY server-side). Same key as
127              // useInvalidatePageBlocks (hooks/use-blocks.ts).
128              if (pageId) qc.invalidateQueries({ queryKey: ["pages", pageId, "blocks"] });
129            };
130            void insert().catch((e) =>
131              toast("error", "Could not add the file block", e instanceof Error ? e.message : undefined),
132            );
133          },
134          onProgress: (p) => {
135            const id = handle.fileId;
136            if (id) useUploadStore.getState().set(id, p);
137          },
138        },
139      );
140 
141      try {
142        await handle.promise;
143        // settled: the block now polls GET /files/:id on its own
144        if (handle.fileId) useUploadStore.getState().clear(handle.fileId);
145      } catch (err) {
146        if (handle.fileId) useUploadStore.getState().clear(handle.fileId);
147        if (err instanceof UploadError && err.code === "CANCELLED") {
148          // default: remove the block (spec §2)
149          if (anchor.updateBlockId) {
150            void blockApi.remove(anchor.updateBlockId).catch(() => undefined);
151          }
152          toast("info", "Upload cancelled");
153          return;
154        }
155        if (err instanceof UploadError && err.code === "FILE_TOO_LARGE") {
156          toast("error", "File too large", err.message);
157          return;
158        }
159        toast("error", "Upload failed", err instanceof Error ? err.message : "Unknown error");
160      }
161    },
162    [qc, maxFileSize.data, pageId, workspaceId],
163  );
164 
165  return { start, maxFileSize: maxFileSize.data ?? null, limitLoading: maxFileSize.isLoading };
166}
167