# Cloudinary Media Upload

## Objective

Move image and video handling to Cloudinary without giving up control of who owns what.

Signed, constrained uploads to a media provider with app-owned asset records, permissions, and processing states.

## Before You Begin

This feature is being added to an application that already exists and already
works. Do not scaffold a new project, and do not assume a blank slate.

Inspect the codebase first and establish:

- The existing application structure and where code of this kind already lives.
- The framework and version in use.
- The existing design system — colours, spacing, typography, and component conventions.
- Existing UI components you can reuse instead of writing new ones.
- The existing database structure, if this feature needs to persist anything.
- The existing authentication and authorization system, if this feature is user-scoped.
- Dependencies already installed, so you don't add a library that duplicates one.
- The existing test setup and conventions.

Only start writing code once you understand the above. If the application
already implements part of this feature, extend it rather than replacing it.

## Implementation Instructions

1. Let the browser upload directly to the provider, but have the server issue short-lived signed upload parameters for each request. The account secret stays on the server and never appears in client code or a build artifact.
2. Constrain every upload before signing it: allowed file types, maximum size, destination folder, and the specific transformations permitted. The signature is where those limits are enforced.
3. Record the provider's asset identifier and version alongside the app's own record, and treat that identifier as the key for replacement and deletion. A stored delivery URL is not enough to delete anything.
4. Have the provider notify the app when processing finishes, and reconcile with a scheduled check for anything a notification missed. Notifications are retried, arrive out of order, and are sometimes duplicated, so handling must be idempotent.
5. Ownership, permissions, and who may view a given asset stay the app's decision. Do not treat an unguessable provider URL as access control — it is a link anyone can forward.

## UI and UX Requirements

Match the application's existing design system exactly. Reuse its components,
spacing, and typography. This feature should look like it was always there.

## Responsive Requirements

Works on mobile, tablet, and desktop. Touch targets are large enough to hit on a
phone, and nothing overflows horizontally at 320px.

## Accessibility Requirements

- Fully keyboard navigable.
- Correct semantic elements and ARIA roles.
- Visible focus states.
- Meets WCAG AA contrast.
- Dynamic changes are announced to screen readers.
- Respects prefers-reduced-motion.

## Edge Cases

- An unsigned upload preset lets anyone reading the page source push arbitrary files into the account. Sign server-side and scope each signature to a single upload.
- Without restrictions a user can request an enormous derivative — a video transcode, a long resize chain — and generate real cost. Allow only the transformations the app actually uses and reject the rest.
- Video and large images finish uploading long before they finish processing. Show the asset as pending, and never let a record referencing an unready derivative render as a broken image.
- A derivative can fail permanently, and moderation can reject an asset that was already accepted. Both need a visible state and a path forward rather than a silently missing file.
- Deleting the app's record must also delete the remote asset, and a failure to reach the provider should leave a pending deletion to retry instead of orphaning the file forever.
- Replacing an asset leaves the previous version cached at the edge. Include the version in the delivered URL so a replacement is visible immediately.
- The account has a quota and a rate limit. When either is reached, fail the upload with a clear message and preserve the user's file locally where the app can, rather than losing their work.
- When the provider is unreachable, disable uploading with an explanation while existing assets continue to render from their cached URLs.

## Testing

Exercise the feature end to end in the running application. Cover every edge case
above, then run the existing test suite and confirm nothing regressed.

## Acceptance Criteria

- [ ] Uploads are signed server-side and no account secret is reachable from the browser.
- [ ] File type, size, folder, and permitted transformations are enforced by the signature.
- [ ] Every asset stores the provider identifier and version, and deletion uses that identifier.
- [ ] Processing notifications are handled idempotently and backed by a scheduled reconciliation.
- [ ] Pending, failed, and moderation-rejected assets each have a visible state.
- [ ] Access to an asset is decided by the app rather than by URL obscurity.
- [ ] Quota and rate-limit failures produce a clear message instead of a broken image.
- [ ] The feature matches the existing design system.
- [ ] No existing functionality is broken.

## Adaptation Rules

- Match the existing design system. Do not introduce a new colour palette,
  spacing scale, or component library.
- Reuse existing components and utilities wherever they fit.
- Follow the naming, file layout, and code style already present.
- Do not upgrade, replace, or remove existing dependencies to make this
  feature fit. Adapt the feature to the app, not the app to the feature.
- Do not break existing functionality. If a change is genuinely required in
  existing code, make the smallest one that works and say so.
- If something in these instructions conflicts with how the application is
  built, follow the application and explain the deviation.

## Final Verification

Before you report the work as done:

1. Re-read the acceptance criteria above and check each one against what you
   actually built.
2. Run the application and exercise the feature end to end.
3. Run the existing test suite and confirm you have broken nothing.
4. Check the feature on mobile, tablet, and desktop widths.
5. Check keyboard navigation and focus handling.
6. Summarize what changed: files added, files modified, and anything you
   deliberately did differently because of how this application is built.

If any acceptance criterion is unmet, fix it before reporting completion.