AddThisFeature

Cloudinary Media Upload

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

involved Integrations

What it adds

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

What your agent is told to do

5
  1. 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. 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. 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. 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. 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.

Edge cases it handles

8
  • 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.

Definition of done

9
  • 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.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.