create-nevela 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nevela",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Create a new Nevela app: a Laravel API and a Next.js dashboard from one resource description.",
   "type": "module",
   "bin": {

package/template/laravel/src/Generator/ResourceGenerator.php

@@ -527,6 +527,8 @@ final class ResourceGenerator
                 foreach ($public->create as $field) {
                     if ($d->fields[$field]->kind === 'file') {
                         $lines[] = "Route::put('_nevela/uploads/{$d->name}/{$field}', [{$controller}, 'upload']){$for}->defaults('field', '{$field}')->middleware([{$throttle($public->createThrottle, 'upload')}{$more}])->name('{$d->slug}.upload.{$field}');";
+                        // The same, beside the form's own address: a page knows the form by its slug, not by the resource's name.
+                        $lines[] = "Route::put('{$d->slug}/_uploads/{$field}', [{$controller}, 'upload']){$for}->defaults('field', '{$field}')->middleware([{$throttle($public->createThrottle, 'upload')}{$more}])->name('{$d->slug}.upload.{$field}.here');";
                     }
                 }
                 // What a protected form asks for before it is shown, and after each attempt.

package/template/laravel/src/Http/PublicController.php

@@ -25,6 +25,7 @@ use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
  *   GET  {prefix}/public/{slug}/{id}     one of them, by id or by the field the section names
  *   POST {prefix}/public/{slug}          create one, from the fields the section lists
  *   PUT  {prefix}/public/_nevela/uploads/{Resource}/{field}   a file for such a create
+ *   PUT  {prefix}/public/{slug}/_uploads/{field}              the same, by the form's own address
  *   GET  {prefix}/public/_nevela/form/{slug}                  what a protected form sends back with it
  *   POST {prefix}/public/_nevela/confirm/{slug}/{id}/{key}    the link that proves an address
  *

package/template/laravel/src/Nevela.php

@@ -22,7 +22,7 @@ use Nevela\Laravel\Support\Naming;
 final class Nevela
 {
     /** Written by `pnpm release`; the same number as the repository's git tag. */
-    public const VERSION = '0.9.1';
+    public const VERSION = '0.9.2';
 
     /** @var array<string, Descriptor> */
     private static array $descriptors = [];

package/template/web/app/api/[...path]/route.ts

@@ -18,7 +18,7 @@ import { API_URL, callerHeaders, sessionToken } from "@/lib/laravel";
  *
  * And for a site's visitors, who have no session: what a resource's "public" section
  * opens (`/api/public/…`). Reading it, a form's create (`POST /api/public/<slug>`) and a
- * file for that form (`PUT /api/public/_nevela/uploads/<Resource>/<field>`) go through
+ * file for that form (`PUT /api/public/<slug>/_uploads/<field>`) go through
  * with no token. Laravel has those routes only for resources whose descriptor opens them.
  */
 export const dynamic = "force-dynamic";
@@ -104,8 +104,11 @@ export async function POST(request: NextRequest, context: Context) {
 export async function PUT(request: NextRequest, context: Context) {
   const { path } = await context.params;
   const url = target(path, request.nextUrl.search);
-  // A visitor's file for a public form: /api/public/_nevela/uploads/<Resource>/<field>.
-  const forVisitor = path.length === 5 && path[0] === "public" && path[1] === "_nevela" && path[2] === "uploads";
+  // A visitor's file for a public form: /api/public/_nevela/uploads/<Resource>/<field>,
+  // or by the form's own address, /api/public/<slug>/_uploads/<field>.
+  const forVisitor =
+    path[0] === "public" &&
+    ((path.length === 5 && path[1] === "_nevela" && path[2] === "uploads") || (path.length === 4 && !path[1].startsWith("_") && path[2] === "_uploads"));
   if (!url || !(forVisitor || (path[0] === "_nevela" && path[1] === "uploads"))) {
     return Response.json({ error: "Only uploads are sent this way. Records are saved through the dashboard." }, { status: 405 });
   }

package/template/web/hooks/use-public-form.ts

@@ -12,11 +12,19 @@ interface Issued {
   action?: string | null;
 }
 
+/** What Laravel says when it refuses something. */
+interface Refused {
+  error?: string;
+  issues?: { path?: string; message?: string }[];
+}
+
 export interface PublicForm {
   /** Give this to the form: `<form onSubmit={form.submit}>`. */
   submit: (event: React.FormEvent<HTMLFormElement>) => void;
-  /** Being sent. */
+  /** Being sent: its files first, then the form. */
   pending: boolean;
+  /** The file field being uploaded right now, or null. */
+  uploading: string | null;
   /** Sent, and taken. */
   sent: boolean;
   /** What went wrong, where it isn't about one field: the robot check, too many tries, no connection. */
@@ -25,6 +33,12 @@ export interface PublicForm {
   errors: Record<string, string>;
   /** Start again after a form was sent, to send another. */
   again: () => void;
+  /**
+   * Upload one file for a file field of this form, and get the key to send as its value.
+   * `submit` does this for every file input in the form. It is here for a form that
+   * builds its own values, or uploads as soon as a file is chosen.
+   */
+  upload: (field: string, file: File) => Promise<{ key: string } | { error: string }>;
   /** For `<PublicFormGuard form={form} />`. Not for the form itself to read. */
   guard: {
     honeypot: string | null;
@@ -37,25 +51,34 @@ export interface PublicForm {
 }
 
 export interface PublicFormOptions {
-  /** The record to send, from the form's fields. By default each named field, as typed, with empty ones left out. */
-  values?: (data: FormData) => Record<string, unknown>;
+  /**
+   * The record to send, from the form's fields. By default each named field, as typed,
+   * with empty ones left out, and for each file input the key of its uploaded file.
+   * `uploaded` holds those keys by field name.
+   */
+  values?: (data: FormData, uploaded: Record<string, string>) => Record<string, unknown>;
   onSent?: () => void;
 }
 
 const UNREACHABLE = "That didn't send. Check your connection and try again.";
 
+/** Whether two files are the same choice: an attempt that failed elsewhere doesn't upload it again. */
+const sameFile = (a: File, b: File) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+
 /**
  * A form anyone can send: a resource's public create, with whatever its descriptor's
  * "protect" asks for.
  *
  * ```tsx
- * const form = usePublicForm("contact-messages");
+ * const form = usePublicForm("internship-applications");
  *
  * <form onSubmit={form.submit}>
  *   <input name="email" />
  *   {form.errors.email}
+ *   <input name="cv" type="file" accept="application/pdf" />
+ *   {form.errors.cv}
  *   <PublicFormGuard form={form} />
- *   <button disabled={form.pending}>Send</button>
+ *   <button disabled={form.pending}>{form.uploading ? "Uploading…" : "Send"}</button>
  *   {form.error}
  * </form>
  * ```
@@ -65,6 +88,11 @@ const UNREACHABLE = "That didn't send. Check your connection and try again.";
  * `errors` under that field's name, and anything else to `error`. The checks themselves
  * are Laravel's. Nothing here decides who is let through.
  *
+ * A file input is sent in two steps, as Laravel wants it: the file first, to the form's
+ * own upload address, and then its key as the field's value. The field's types and size
+ * limit are Laravel's to enforce, and what it refuses is shown under the field. A file
+ * that was uploaded is not uploaded again when the form fails for another reason.
+ *
  * A resource with no "protect" works too: there is no token to fetch, and the form is
  * sent as it is.
  */
@@ -72,11 +100,14 @@ export function usePublicForm(slug: string, { values, onSent }: PublicFormOption
   const [issued, setIssued] = React.useState<Issued | null>(null);
   const [attempt, setAttempt] = React.useState(0);
   const [pending, setPending] = React.useState(false);
+  const [uploading, setUploading] = React.useState<string | null>(null);
   const [sent, setSent] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [errors, setErrors] = React.useState<Record<string, string>>({});
   const robot = React.useRef<string | null>(null);
   const sending = React.useRef(false);
+  /** Files already uploaded for this form and not yet used, by field. */
+  const uploaded = React.useRef<Record<string, { file: File; key: string }>>({});
 
   // The token says when the form was handed out, so it is asked for when the form
   // appears, and a fresh one after each attempt.
@@ -99,44 +130,88 @@ export function usePublicForm(slug: string, { values, onSent }: PublicFormOption
     robot.current = token;
   }, []);
 
+  const upload = React.useCallback(
+    async (field: string, file: File): Promise<{ key: string } | { error: string }> => {
+      try {
+        const response = await fetch(`/api/public/${encodeURIComponent(slug)}/_uploads/${encodeURIComponent(field)}?name=${encodeURIComponent(file.name)}`, {
+          method: "PUT",
+          headers: { "Content-Type": file.type || "application/octet-stream", Accept: "application/json" },
+          body: file,
+        });
+        const answer = (await response.json().catch(() => null)) as (Refused & { key?: string }) | null;
+        if (response.ok && typeof answer?.key === "string") return { key: answer.key };
+        return { error: answer?.issues?.find((issue) => issue.message)?.message ?? answer?.error ?? "That file couldn't be uploaded." };
+      } catch {
+        return { error: UNREACHABLE };
+      }
+    },
+    [slug],
+  );
+
   const submit = React.useCallback(
     (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
       if (sending.current) return;
       const element = event.currentTarget;
       const data = new FormData(element);
-      const body: Record<string, unknown> = values ? { ...values(data) } : {};
-      if (!values) {
-        for (const [name, value] of data.entries()) {
-          // A file is uploaded on its own, and its key sent here: see the public uploads route.
-          if (typeof value === "string" && value !== "") body[name] = value;
-        }
-      }
-      // The field no person sees goes as it is, whatever `values` kept: it is how a bot is known.
-      if (issued?.honeypot) {
-        const bait = data.get(issued.honeypot);
-        if (typeof bait === "string" && bait !== "") body[issued.honeypot] = bait;
-      }
-      if (issued?.token) body._form = issued.token;
-      if (robot.current) body._turnstile = robot.current;
 
       sending.current = true;
       setPending(true);
       setError(null);
       setErrors({});
-      fetch(`/api/public/${encodeURIComponent(slug)}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json", Accept: "application/json" },
-        body: JSON.stringify(body),
-      })
-        .then(async (response) => {
+
+      void (async () => {
+        // The files first: each to its own field's address, for a key to send in its place.
+        const keys: Record<string, string> = {};
+        for (const [name, value] of data.entries()) {
+          // An input nobody chose a file for is an empty file with no name.
+          if (typeof value === "string" || value.size === 0) continue;
+          const before = uploaded.current[name];
+          if (before && sameFile(before.file, value)) {
+            keys[name] = before.key;
+            continue;
+          }
+          setUploading(name);
+          const result = await upload(name, value);
+          setUploading(null);
+          if ("error" in result) {
+            // Nothing was sent, so the form's token and the robot check are still good.
+            setErrors({ [name]: result.error });
+            return false;
+          }
+          uploaded.current[name] = { file: value, key: result.key };
+          keys[name] = result.key;
+        }
+
+        const body: Record<string, unknown> = values ? { ...values(data, keys) } : { ...keys };
+        if (!values) {
+          for (const [name, value] of data.entries()) {
+            if (typeof value === "string" && value !== "") body[name] = value;
+          }
+        }
+        // The field no person sees goes as it is, whatever `values` kept: it is how a bot is known.
+        if (issued?.honeypot) {
+          const bait = data.get(issued.honeypot);
+          if (typeof bait === "string" && bait !== "") body[issued.honeypot] = bait;
+        }
+        if (issued?.token) body._form = issued.token;
+        if (robot.current) body._turnstile = robot.current;
+
+        try {
+          const response = await fetch(`/api/public/${encodeURIComponent(slug)}`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", Accept: "application/json" },
+            body: JSON.stringify(body),
+          });
           if (response.ok) {
+            // Its files belong to the record now.
+            uploaded.current = {};
             element.reset();
             setSent(true);
             onSent?.();
-            return;
+            return true;
           }
-          const answer = (await response.json().catch(() => null)) as { error?: string; issues?: { path?: string; message?: string }[] } | null;
+          const answer = (await response.json().catch(() => null)) as Refused | null;
           const byField: Record<string, string> = {};
           const rest: string[] = [];
           for (const issue of answer?.issues ?? []) {
@@ -145,19 +220,32 @@ export function usePublicForm(slug: string, { values, onSent }: PublicFormOption
             if (issue.path && element.elements.namedItem(issue.path)) byField[issue.path] ??= issue.message;
             else rest.push(issue.path ? `${issue.path}: ${issue.message}` : issue.message);
           }
+          // A file Laravel won't take as it is (used, or uploaded too long ago) is uploaded again next time.
+          for (const name of Object.keys(byField)) delete uploaded.current[name];
           setErrors(byField);
           setError(Object.keys(byField).length > 0 && rest.length === 0 ? null : (rest[0] ?? answer?.error ?? UNREACHABLE));
+        } catch {
+          setError(UNREACHABLE);
+        }
+        return true;
+      })()
+        // (A `values` of the form's own that throws: nothing was sent.)
+        .catch(() => {
+          setError(UNREACHABLE);
+          return false;
         })
-        .catch(() => setError(UNREACHABLE))
-        .finally(() => {
-          sending.current = false;
+        .then((attempted) => {
+        sending.current = false;
+        setUploading(null);
+        setPending(false);
+        if (attempted) {
           robot.current = null;
-          setPending(false);
-          // Whatever happened, the next attempt needs a new token and a new robot check.
+          // Whatever Laravel said, the next attempt needs a new token and a new robot check.
           setAttempt((count) => count + 1);
-        });
+        }
+      });
     },
-    [slug, issued, values, onSent],
+    [slug, issued, values, onSent, upload],
   );
 
   const again = React.useCallback(() => {
@@ -171,5 +259,5 @@ export function usePublicForm(slug: string, { values, onSent }: PublicFormOption
     [issued, attempt, setRobot],
   );
 
-  return { submit, pending, sent, error, errors, again, guard };
+  return { submit, pending, uploading, sent, error, errors, again, upload, guard };
 }

package/template/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nevela-web",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "private": true,
   "type": "module",
   "scripts": {