Working with AI

An AI agent can write you an upload box from scratch. It will look fine in the first demo, and then it meets real files: a folder dropped on it, an .exe renamed to .png, a cancel that races a late reply from the server. Drop Upload has already met all of those. Give it to your agent and the session goes into wiring it into your app, not into finding those bugs again.

Because the component ships as source, your agent can read every line of it: the props, the states, and the comments that explain why things work the way they do.

1. Put the folder in your repo

Copy DropUpload from your ZIP into your project, for example into src/components/, and install motion. The agent can't fetch the component for you, so this step is yours. Easy Installation walks through it.

2. Tell your agent what you want

Say where the component lives, what it should accept, which adapter to use and where the result goes. Three prompts that work well:

An uploader in a form

Add the DropUpload component from src/components/DropUpload to the support ticket form. Accept images and PDFs up to 10 MB, at most 5 files. Upload with createRestAdapter to a new POST route at /api/attachments, and keep the URLs from onUploadComplete in the form state. Read index.ts and models/Settings.ts in that folder for the API. Don't change any file inside DropUpload.

An avatar field

Use AvatarUpload from src/components/DropUpload on the account settings page. Upload through createS3PresignedAdapter, with a new route at /api/s3/presign that returns a presigned PUT URL for the file. When onUploadComplete fires, save file.url as the user's avatar. The server side is described at https://dropupload.dev/docs/uploading/s3

Matching your design system

Make DropUpload match our theme. Override its --du-* CSS variables from our global stylesheet using our existing color tokens, and pass darkMode from the resolved theme of our theme provider. The variables are listed at https://dropupload.dev/docs/usage/customization

3. Read the diff

A good result touches your page, your API route and maybe a stylesheet. It doesn't rewrite the component.

• The component is unchanged. Most requests come down to props, callbacks and CSS variables. If the agent edited files inside DropUpload, ask it why before you accept it.
• The server checks again. Types and sizes are validated in the browser to help people, and anyone can skip the browser. Your route should check the file too.
• Secrets stay on the server. Presigned URLs and tokens come from your backend. No storage keys in client code.