Add File Uploads and Image Handling to Your AI-Built App

Every app eventually needs uploads — avatars, receipts, attachments, photos of work performed. And every upload feature breaks the same ways before it works: mysterious size rejections, formats that shouldn't pass but do, files that vanish after deployment. The failure patterns are so consistent they're worth learning once, upfront.

Decide what you're actually accepting

Start narrower than feels comfortable. If the feature is profile photos, accept a few image formats at modest sizes — not documents, not video, not "whatever users have." Every accepted type multiplies validation and storage paths. Write down your acceptance rules in plain language first: types, maximum dimensions, maximum file size. Hand those rules to your agent as requirements rather than letting defaults decide.

Validate on both ends, for different reasons

Client-side checks exist for user experience: catching an oversized file instantly beats letting them wait for a failed round trip. Server-side checks exist for survival: anything arriving over the network is untrusted regardless of what the browser claimed. Both layers matter because each catches what the other can't. When uploads mysteriously fail with nothing in your logs, the culprit is usually an infrastructure limit sitting between those layers, rejecting large requests silently.

Choose storage by where the app lives

Files need a home that survives deployments. Options in ascending commitment: local disk (fine for single-server setups, dangerous when instances are disposable), managed object storage (durable, cheap at small scale, slightly more wiring), or database blobs (convenient, wrong past toy scale). Most AI-built apps want object storage plus a database row describing each file. The pairing logic mirrors how you'd approach connecting an app to a managed database — metadata relational, payloads elsewhere.

Serve images responsibly

Raw uploads served directly punish mobile users and page scores alike. Request the boring optimizations from your agent: reasonable dimension caps on ingest, modern formats on output, lazy loading below the fold, and explicit dimensions to prevent layout shift. None require exotic tooling; all compound into noticeably faster pages. The same discipline underpins broader performance work described in making AI-built apps fast and responsive.

Plan for the weird cases

Users rename screenshots to .jpg, connections die mid-upload, identical files arrive twice, someone submits while offline. Each has a boring fix: verify actual content not just extension, make retries idempotent, deduplicate by content hash, queue submissions when connectivity returns. Ask your agent which of these it implemented; gaps found in conversation cost minutes, gaps found in production cost support tickets.

Clean up or drown eventually

Orphaned files accumulate silently: uploads abandoned mid-flow, images for deleted records, test junk from development. A periodic reconciliation job comparing storage contents against database records keeps drift visible and reversible. Schedule it from day one — retrofitting cleanup onto years of accumulated orphans is nobody's idea of a good month. Scheduled jobs themselves follow the patterns covered in cron-style task scheduling for AI-built apps.

The meshcode angle

Upload features touch frontend forms, backend routes, storage configuration, and database schema simultaneously — multi-file changes where reviewing diffs beside generation prevents most surprises. meshcode gives each agent session a pane with reviewable output alongside, over one repository. Bring your existing subscription or use metered pay-as-you-go credits.

👉 Download meshcode — Mac, Windows