@flaredev/cli 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.11.0"
+    "@flaredev/core": "0.12.0"
   },
   "engines": {
     "node": ">=22"

package/templates/app/.dev.vars.example

@@ -11,3 +11,23 @@ BETTER_AUTH_SECRET=
 RESEND_API_KEY=
 # Sender on a domain verified in Resend, e.g. "Acme <hello@acme.com>"
 MAIL_FROM=
+
+# Where uploads go. The default is the bound STORAGE bucket, which needs nothing set.
+# Set a driver only to send files to a CDN instead — see the file-uploads guide.
+# STORAGE_DRIVER=cloudinary
+# CLOUDINARY_CLOUD_NAME=
+# CLOUDINARY_API_KEY=
+# CLOUDINARY_API_SECRET=
+
+# STORAGE_DRIVER=uploadthing   # needs: pnpm add uploadthing
+# UPLOADTHING_TOKEN=
+# UPLOADTHING_APP_ID=
+
+# Both serve files from their own CDN, so a read URL is public and does not expire.
+# Set this to keep every read signed and proxied by the app instead.
+# STORAGE_PUBLIC=false
+
+# Images are shrunk in the browser before upload (about 20x smaller). Set this to turn
+# it off and send the original bytes. It is read at build time, so changing it means a
+# rebuild rather than a restart.
+# NEXT_PUBLIC_OPTIMISE_UPLOADS=false

package/templates/app/app/dashboard/import-actions.ts

@@ -37,10 +37,10 @@ async function allowed(resourceName: string, action: PolicyAction): Promise<Acti
 /** A store failure as one line of text, attributed to a field when the issues name one. */
 function describe(failure: Failure): { error: string; field?: string } {
   const issues = failure.issues ?? [];
-  if (issues.length === 0) return { error: failure.error, field: failure.field };
+  if (issues.length === 0) return { error: failure.error };
   return {
     error: issues.map((issue) => (issue.path ? `${issue.path}: ${issue.message}` : issue.message)).join("; "),
-    field: issues[0]?.path.split(".")[0] || failure.field,
+    field: issues[0]?.path.split(".")[0],
   };
 }
 

package/templates/app/app/dashboard/invitations/actions.ts

@@ -0,0 +1,62 @@
+"use server";
+
+import { headers } from "next/headers";
+import { revalidatePath } from "next/cache";
+import { ADMIN_ROLES, requireDashboard } from "@/lib/dashboard";
+import { currentUser } from "@/lib/api";
+import { createInvitation, invitationLink, revokeInvitation } from "@/lib/invitations";
+
+/**
+ * Issuing and revoking invitations.
+ *
+ * Both are admin-only, checked here rather than trusted from the page: a server action is
+ * an endpoint, and an endpoint that relies on not being linked to is not protected.
+ */
+async function requireAdmin(): Promise<void> {
+  await requireDashboard("/dashboard/invitations");
+  const account = await currentUser();
+  if (!account || !ADMIN_ROLES.includes(account.role ?? "")) {
+    throw new Error("Only an admin can manage invitations.");
+  }
+}
+
+/** The app's own origin, from the request, so the link works wherever it is deployed. */
+async function origin(): Promise<string> {
+  const incoming = await headers();
+  const host = incoming.get("x-forwarded-host") ?? incoming.get("host") ?? "localhost:3000";
+  const scheme = incoming.get("x-forwarded-proto") ?? (host.startsWith("localhost") || host.startsWith("127.") ? "http" : "https");
+  return `${scheme}://${host}`;
+}
+
+export interface IssuedInvitation {
+  link: string;
+  email: string | null;
+  expiresAt: string;
+}
+
+/**
+ * Create one and return the link.
+ *
+ * Returned rather than emailed, and shown once: the token is not stored, so there is no
+ * second chance to read it. Send it however you like — that keeps this working in an app
+ * with no mail configured, which a fresh app is.
+ */
+export async function issueInvitation(formData: FormData): Promise<IssuedInvitation> {
+  await requireAdmin();
+  const raw = String(formData.get("email") ?? "").trim();
+  const days = Number(formData.get("days")) || undefined;
+  const invitation = await createInvitation({ for: raw ? { email: raw } : { anyone: true }, days });
+  revalidatePath("/dashboard/invitations");
+  return {
+    link: invitationLink(await origin(), invitation.token),
+    email: invitation.email,
+    expiresAt: invitation.expiresAt.toISOString(),
+  };
+}
+
+/** Revoke one, so a link sent to the wrong address stops working. */
+export async function cancelInvitation(id: string): Promise<void> {
+  await requireAdmin();
+  await revokeInvitation(id);
+  revalidatePath("/dashboard/invitations");
+}

package/templates/app/app/dashboard/invitations/page.tsx

@@ -0,0 +1,121 @@
+import { MailIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { LocalTime } from "@/components/dashboard/local-time";
+import { InviteForm } from "@/components/dashboard/invite-form";
+import { authConfig } from "@/lib/auth-config";
+import { ADMIN_ROLES, requireDashboard } from "@/lib/dashboard";
+import { currentUser } from "@/lib/api";
+import { listInvitations } from "@/lib/invitations";
+import { cancelInvitation, issueInvitation } from "./actions";
+
+export const metadata = { title: "Invitations" };
+
+/**
+ * Who has been invited, and a form to invite somebody.
+ *
+ * Only useful when `authConfig.signup` is `invite`, so the page says so rather than
+ * quietly issuing links that nothing checks — an invitation that is not required is a
+ * link that looks like a gate and is not one.
+ */
+export default async function InvitationsPage() {
+  await requireDashboard("/dashboard/invitations");
+  const account = await currentUser();
+  const isAdmin = Boolean(account && ADMIN_ROLES.includes(account.role ?? ""));
+  const invitations = authConfig.signup === "invite" ? await listInvitations() : [];
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title="Invitations" description="Links that let somebody create an account." />
+
+      {authConfig.signup !== "invite" && (
+        <Alert>
+          <AlertTitle>Sign-up is {authConfig.signup}</AlertTitle>
+          <AlertDescription>
+            {authConfig.signup === "open"
+              ? "Anybody can create an account, so an invitation is not needed. Set signup to \"invite\" in lib/auth-config.ts to require one."
+              : "Nobody can create an account. Make them with `flare user:add <email>`, or set signup to \"invite\" in lib/auth-config.ts to use links instead."}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {authConfig.signup === "invite" && !isAdmin && (
+        <Alert>
+          <AlertTitle>Admins only</AlertTitle>
+          <AlertDescription>Your role cannot issue invitations.</AlertDescription>
+        </Alert>
+      )}
+
+      {authConfig.signup === "invite" && isAdmin && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Invite somebody</CardTitle>
+            <CardDescription>
+              Leave the address empty for a link anybody may use. The link is shown once — it is not stored, so there is no way to read it again.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <InviteForm issue={issueInvitation} />
+          </CardContent>
+        </Card>
+      )}
+
+      {authConfig.signup === "invite" && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Outstanding</CardTitle>
+            <CardDescription>Invitations that have not been used and have not expired.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {invitations.length === 0 ? (
+              <Empty>
+                <EmptyHeader>
+                  <MailIcon />
+                  <EmptyTitle>Nothing outstanding</EmptyTitle>
+                  <EmptyDescription>An invitation disappears from here once it is used.</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>For</TableHead>
+                    <TableHead>Issued</TableHead>
+                    <TableHead>Expires</TableHead>
+                    <TableHead className="w-24" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {invitations.map((invitation) => (
+                    <TableRow key={invitation.id}>
+                      <TableCell>{invitation.email ?? <Badge variant="secondary">anybody with the link</Badge>}</TableCell>
+                      <TableCell>
+                        <LocalTime value={invitation.createdAt.toISOString()} />
+                      </TableCell>
+                      <TableCell>
+                        <LocalTime value={invitation.expiresAt.toISOString()} />
+                      </TableCell>
+                      <TableCell>
+                        {isAdmin && (
+                          <form action={cancelInvitation.bind(null, invitation.id)}>
+                            <button type="submit" className="text-sm text-destructive underline-offset-4 hover:underline">
+                              Revoke
+                            </button>
+                          </form>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/templates/app/app/invite/[token]/route.ts

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import { INVITE_COOKIE, INVITE_COOKIE_MAX_AGE } from "@/lib/invitations";
+
+/**
+ * Where an invitation link lands.
+ *
+ * It does one thing: put the token in a short-lived cookie and send the person to the
+ * sign-up page. The token stays out of the sign-up URL, so it is not in a bookmark, a
+ * referrer header or a screenshot of the address bar — and the sign-up form needs no
+ * hidden field, which means every way of signing up is covered by the same check in
+ * lib/auth.ts.
+ *
+ * The invitation is not validated here. A bad token simply fails at sign-up, which is
+ * one place to get right rather than two; validating twice is how the two drift apart.
+ */
+export async function GET(_request: Request, context: { params: Promise<{ token: string }> }): Promise<never> {
+  const { token } = await context.params;
+  const jar = await cookies();
+  jar.set(INVITE_COOKIE, token, {
+    httpOnly: true,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    maxAge: INVITE_COOKIE_MAX_AGE,
+  });
+  redirect("/sign-up?invited=1");
+}

package/templates/app/app/sign-up/page.tsx

@@ -1,42 +1,61 @@
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { AuthShell } from "@/components/auth/auth-shell";
-import { SignUpForm } from "@/components/auth/sign-up-form";
-import { enabledSocialProviders } from "@/lib/auth";
-import { authConfig } from "@/lib/auth-config";
-import { getSession, safeRedirectPath } from "@/lib/session";
-import { site } from "@/lib/site";
-import { theme } from "@/lib/theme";
-
-export const metadata = { title: "Create an account" };
-
-export default async function SignUpPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
-  const params = await searchParams;
-  const next = safeRedirectPath(params.next);
-  if (await getSession()) redirect(next);
-
-  const copy = theme.signUp(site.name);
-  return (
-    <AuthShell
-      page="sign-up"
-      title={copy.title}
-      subtitle={(copy as { subtitle?: string }).subtitle}
-      footer={
-        <>
-          Already have an account?{" "}
-          <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
-            Sign in
-          </Link>
-        </>
-      }
-    >
-      <SignUpForm
-        providers={enabledSocialProviders()}
-        socialPlacement={theme.social}
-        socialStyle={theme.socialStyle}
-        next={next}
-        verifyFirst={authConfig.requireEmailVerification}
-      />
-    </AuthShell>
-  );
-}
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { SignUpForm } from "@/components/auth/sign-up-form";
+import { enabledSocialProviders } from "@/lib/auth";
+import { authConfig, signupOffered } from "@/lib/auth-config";
+import { anyAccountExists } from "@/lib/user-titles";
+import { getSession, safeRedirectPath } from "@/lib/session";
+import { site } from "@/lib/site";
+import { theme } from "@/lib/theme";
+
+export const metadata = { title: "Create an account" };
+
+export default async function SignUpPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+  const params = await searchParams;
+  const next = safeRedirectPath(params.next);
+  if (await getSession()) redirect(next);
+
+  // An app with sign-up closed does not offer a form that would be refused: the gate is
+  // in lib/auth.ts, and this is only about not wasting somebody's time at it. The first
+  // account is exempt there, so a brand-new app can still be set up — which is why this
+  // checks whether anybody exists rather than only the setting.
+  if (!signupOffered && (await anyAccountExists())) {
+    return (
+      <AuthShell page="sign-up" title="Sign-up is closed" subtitle={`${site.name} is not accepting new accounts.`} footer={null}>
+        <p className="text-sm text-muted-foreground">
+          If you should have an account, ask whoever runs {site.name} to make you one.{" "}
+          <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="underline underline-offset-4">
+            Sign in
+          </Link>
+          .
+        </p>
+      </AuthShell>
+    );
+  }
+
+  const copy = theme.signUp(site.name);
+  return (
+    <AuthShell
+      page="sign-up"
+      title={copy.title}
+      subtitle={(copy as { subtitle?: string }).subtitle}
+      footer={
+        <>
+          Already have an account?{" "}
+          <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
+            Sign in
+          </Link>
+        </>
+      }
+    >
+      <SignUpForm
+        providers={enabledSocialProviders()}
+        socialPlacement={theme.social}
+        socialStyle={theme.socialStyle}
+        next={next}
+        verifyFirst={authConfig.requireEmailVerification}
+      />
+    </AuthShell>
+  );
+}

package/templates/app/components/dashboard/fields/file-field.tsx

@@ -27,7 +27,7 @@ interface Props {
   fieldKey: string;
 }
 
-type Upload = { name: string; loaded: number; total: number; abort: () => void };
+type Upload = { name: string; loaded: number; total: number; originalSize?: number; abort: () => void };
 
 /** "contacts/avatar/2026/09/<uuid>-me.png" → "me.png" */
 const fileName = (key: string) => key.split("/").pop()!.replace(/^[0-9a-f-]{36}-/, "");
@@ -35,6 +35,68 @@ const fileName = (key: string) => key.split("/").pop()!.replace(/^[0-9a-f-]{36}-
 const IMAGE_TYPES = new Set<string>(FILE_CATEGORIES.image);
 const isImageKey = (key: string) => /\.(png|jpe?g|gif|webp|avif)$/i.test(key);
 
+/**
+ * How a picked image is re-encoded before it is uploaded.
+ *
+ * 1600px is larger than any screen shows a photograph at, and 0.82 is the quality
+ * where WebP stops being visibly lossy for photographs. `auto` keeps anything with
+ * real transparency lossless, so a logo is never flattened onto a black background.
+ *
+ * Change these and every upload changes with them; they are deliberately one object
+ * rather than scattered through the call.
+ */
+const IMAGE_PROFILE = {
+  name: "flare",
+  max_width: 1600,
+  max_height: 1600,
+  crop: false,
+  quality: 0.82,
+  format: "auto",
+  // A crash guard, not a security control: a solid-colour PNG of 144 megapixels is a
+  // small file that will kill a mobile browser tab when it is decoded.
+  max_pixels: 50_000_000,
+} as const;
+
+/**
+ * Optimisation is on unless this says otherwise.
+ *
+ * It has to be a NEXT_PUBLIC_ variable because this decision is made in the browser,
+ * and those are substituted at build time — so turning it off is a rebuild, not a
+ * restart. That is the trade for not shipping a round trip to ask the server whether
+ * to compress before every upload.
+ *
+ * Reasons to turn it off: a field that must keep the file byte-for-byte, a photography
+ * site where 1600px is a downgrade, or anything where the original is the deliverable.
+ */
+const OPTIMISE_IMAGES = process.env.NEXT_PUBLIC_OPTIMISE_UPLOADS !== "false";
+
+/**
+ * The most we will decode in the browser, whatever the field's own limit is.
+ *
+ * The size check moves to *after* optimisation for images, because a 6 MB photo that
+ * becomes 32 KB should not be refused for being 6 MB. This is the bound that stops
+ * that being an invitation to hand the tab a 500 MB file.
+ */
+const MAX_DECODE_BYTES = 80 * 1024 * 1024;
+
+/** GIF loses every frame but the first on a canvas, so it is passed through untouched. */
+const OPTIMISABLE = new Set(["image/png", "image/jpeg", "image/webp", "image/avif"]);
+
+/** What `prepare` hands to the uploader: the bytes to send, and what to call them. */
+interface Prepared {
+  blob: Blob;
+  name: string;
+  type: string;
+  /** The size of what the user picked, when that differs from what is being sent. */
+  originalSize?: number;
+}
+
+/** "me.PNG" + "image/webp" → "me.webp", so the stored key says what the bytes are. */
+function renameTo(name: string, mime: string): string {
+  const extension = mime.split("/")[1]?.replace("jpeg", "jpg") ?? "bin";
+  return `${name.replace(/\.[^./\\]+$/, "") || "image"}.${extension}`;
+}
+
 const oneDecimal = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 });
 const whole = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
 
@@ -59,7 +121,7 @@ const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1
 const typeName = (type: string) => (type.split("/")[1] ?? type).replace(/^vnd\..*\./, "").toUpperCase();
 
 /** PUT with progress events, which fetch() can't report for uploads. */
-function put(url: string, file: File, onProgress: (loaded: number) => void, signal: { abort?: () => void }) {
+function put(url: string, file: Prepared, onProgress: (loaded: number) => void, signal: { abort?: () => void }) {
   return new Promise<void>((resolve, reject) => {
     const request = new XMLHttpRequest();
     signal.abort = () => request.abort();
@@ -78,7 +140,7 @@ function put(url: string, file: File, onProgress: (loaded: number) => void, sign
     request.onabort = () => reject(new DOMException("Upload cancelled.", "AbortError"));
     request.open("PUT", url);
     request.setRequestHeader("Content-Type", file.type || "application/octet-stream");
-    request.send(file);
+    request.send(file.blob);
   });
 }
 
@@ -99,7 +161,8 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
 
   const accepted = mimeTypesFor(field.accept);
   const maxBytes = fileMaxBytes(field);
-  const help = `${capitalize(describeAccept(field.accept))}, up to ${formatBytes(maxBytes)}`;
+  const shrinks = OPTIMISE_IMAGES && field.accept.includes("image");
+  const help = `${capitalize(describeAccept(field.accept))}, up to ${formatBytes(maxBytes)}${shrinks ? " — images are shrunk before upload" : ""}`;
   const busy = upload !== null;
 
   // Thumbnail for a stored image (a local preview replaces it while uploading).
@@ -117,7 +180,12 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
   async function check(file: File): Promise<string | null> {
     const type = file.type || "application/octet-stream";
     if (!matchesContentType(type, accepted)) return `${field.label} accepts ${describeAccept(field.accept)} files.`;
-    if (file.size > maxBytes) return `${file.name} is ${formatBytes(file.size)}; the limit is ${formatBytes(maxBytes)}.`;
+    // An image is measured after it has been shrunk — a 6 MB photo that becomes 32 KB
+    // is not over a 1 MB limit, and refusing it before trying would be a lie. Anything
+    // else is measured as it is, because nothing is going to make it smaller.
+    const willShrink = OPTIMISE_IMAGES && OPTIMISABLE.has(type);
+    const limit = willShrink ? Math.max(maxBytes, MAX_DECODE_BYTES) : maxBytes;
+    if (file.size > limit) return `${file.name} is ${formatBytes(file.size)}; the limit is ${formatBytes(limit)}.`;
     const head = new Uint8Array(await file.slice(0, SNIFF_BYTES).arrayBuffer());
     if (sniffMatches(type, head) === false) {
       return `${file.name} isn't a valid ${typeName(type)} file. It may have been renamed; choose the original file.`;
@@ -125,24 +193,73 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
     return null;
   }
 
+  /**
+   * The bytes to upload: the picked file, or a smaller version of it.
+   *
+   * The optimiser is imported here rather than at the top of the file, so a form with
+   * no image field never loads a canvas encoder, and a page that only reads records
+   * never loads it at all.
+   *
+   * A file that cannot be decoded is uploaded untouched. Losing somebody's upload
+   * because a codec choked is the worse of the two failures.
+   */
+  async function prepare(file: File): Promise<Prepared> {
+    const type = file.type || "application/octet-stream";
+    const asIs: Prepared = { blob: file, name: file.name, type };
+    if (!OPTIMISE_IMAGES || !OPTIMISABLE.has(type)) return asIs;
+
+    try {
+      setStatus(`Optimising ${file.name}…`);
+      const { optimizeImage } = await import("@gritframework/upload/web");
+      const { primary } = await optimizeImage(file, IMAGE_PROFILE);
+      // Only if it actually helped: re-encoding a small, already-optimised image can
+      // come out larger, and uploading the bigger one would be a straight loss.
+      if (primary.blob.size >= file.size) return asIs;
+      return {
+        blob: primary.blob,
+        name: renameTo(file.name, primary.mime),
+        type: primary.mime,
+        originalSize: file.size,
+      };
+    } catch {
+      return asIs;
+    }
+  }
+
   async function start(file: File) {
     setError(null);
     const problem = await check(file);
     if (problem) return setError(problem);
 
-    // A browser leaves `type` empty for an extension it doesn't know, and an upload has
-    // to say what it is sending, so fall back to the type that means "bytes".
-    const contentType = file.type || "application/octet-stream";
     const signal: { abort?: () => void } = {};
     const localPreview = IMAGE_TYPES.has(file.type) ? URL.createObjectURL(file) : null;
-    setUpload({ name: file.name, loaded: 0, total: file.size, abort: () => signal.abort?.() });
     if (localPreview) setPreview(localPreview);
-    setStatus(`Uploading ${file.name}…`);
 
     try {
-      const signed = await createUploadUrlAction(resourceName, fieldKey, { name: file.name, type: contentType, size: file.size });
+      // Shrink first, then sign: the URL carries the size it is allowed to accept, and
+      // that has to be the size of what is actually being sent.
+      const sending = await prepare(file);
+      if (sending.blob.size > maxBytes) {
+        const was = sending.originalSize ? ` (${formatBytes(sending.originalSize)} before optimising)` : "";
+        throw new Error(`${file.name} is ${formatBytes(sending.blob.size)}${was}; the limit is ${formatBytes(maxBytes)}.`);
+      }
+
+      setUpload({
+        name: file.name,
+        loaded: 0,
+        total: sending.blob.size,
+        originalSize: sending.originalSize,
+        abort: () => signal.abort?.(),
+      });
+      setStatus(`Uploading ${file.name}…`);
+
+      const signed = await createUploadUrlAction(resourceName, fieldKey, {
+        name: sending.name,
+        type: sending.type,
+        size: sending.blob.size,
+      });
       if (!signed.ok) throw new Error(signed.error);
-      await put(signed.data.url, file, (loaded) => setUpload((current) => current && { ...current, loaded }), signal);
+      await put(signed.data.url, sending, (loaded) => setUpload((current) => current && { ...current, loaded }), signal);
       onChange(signed.data.key);
       setStatus(`${file.name} uploaded`);
     } catch (cause) {
@@ -225,6 +342,9 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
               <span className="truncate font-medium">{upload.name}</span>
               <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                 {percent}% · {formatBytes(upload.loaded)} of {formatBytes(upload.total)}
+                {upload.originalSize !== undefined && (
+                  <span className="text-primary"> · from {formatBytes(upload.originalSize)}</span>
+                )}
               </span>
             </div>
             <Progress value={percent} aria-label={`Uploading ${upload.name}`} />