Uploaded files never touch the Next.js server

The portal has a FileDropZone component that handles file uploads for session recordings, stems, accessibility reports, and software deliverables. The upload flow is three steps and the file never passes through the Next.js server. Step one — the client-side code posts the filename, content type, and size to an API route that generates a presigned upload URL from Cloudflare R2. Step two — the browser uploads the file directly to R2 using that presigned URL with a PUT request. The file travels from the client's device to object storage without touching the application server, which means a 500MB WAV file does not consume server memory or block the event loop. Step three — the client calls a completion endpoint that creates an Attachment record in the database linking the R2 key to the project and optionally to a session. The drop zone itself is a div with role button, tabIndex zero, and keyboard handlers for Enter and Space so it works without a mouse. Drag a file over it and the border highlights. Tap it on mobile and the native file picker opens with an accept list filtered to audio, PDF, and image types. Multiple files upload in sequence with a progress label for each one. Completed files appear below the drop zone with an emerald checkmark, the filename, and a formatted file size. The same component works in the admin panel for uploading deliverables and in the session view for attaching recordings. One drop zone, one three-step flow, zero server-side file handling.