Strapi

​

How does it work?

• Autorender Media Library page — browse your Autorender folders and files, and either import existing assets into Strapi’s own Media Library, or upload a new file straight to Autorender.
• Import by reference — importing does not copy or re-host file bytes. Strapi stores the Autorender CDN URL directly in the Media Library entry.
• Upload provider (optional) — when enabled, new files uploaded anywhere in Strapi (Content Manager, Media Library, anywhere) are sent to Autorender instead of Strapi’s default storage.

​

Prerequisites

• A Strapi project (v5 or later)
• Node.js 18 or later
• Administrator access to your Strapi instance
• An Autorender workspace and a private API key — see Create an API Key

​

1. Install the plugin

npm install @autorender/strapi --save

yarn add @autorender/strapi

pnpm add @autorender/strapi

bun add @autorender/strapi

npm run build
npm run develop

​

2. Configure the plugin

​

3. (Optional) Route new uploads to Autorender

​

4. Browse, import, and upload Autorender assets

• Use the folder cards or the search box to find the assets you want. Folders can nest — clicking one shows its subfolders and files, with a breadcrumb trail to navigate back up.
• Select one or more assets by clicking a tile or its checkbox, then click Import selected to create the corresponding entries in Strapi’s own Media Library.
• Or click Upload to add a new file straight to Autorender without leaving Strapi — it uploads into whichever folder you’re currently browsing.

​

5. Grant access to other roles (optional)

​

6. Allow Autorender’s CDN in your CSP

module.exports = [
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'"],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'assets.autorender.io', // Replace with your custom domain, if you use one
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'assets.autorender.io', // Replace with your custom domain, if you use one
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // Keep your other middleware entries here
];

​

Troubleshooting

• “Autorender integration is disabled” — turn on Enable Autorender integration under Settings → Autorender and save.
• “Missing Autorender API key” — add a valid private key under Settings → Autorender.
• Browsing can see assets, but “Import selected” / “Upload” return a 403 — see step 5: the two Media Library permissions are separate.
• Browsing fails with a generic network error, but works on retry — the plugin retries transient connection failures automatically for browsing (idempotent requests) only. A failure that survives several retries usually means Autorender is unreachable or the API key is invalid.
• An import or upload fails with a generic network error — writes are never retried automatically, since retrying one whose response was lost could create a duplicate asset. Confirm whether it actually completed in Autorender before retrying yourself.
• An imported asset shows as a generic file instead of an image — the plugin infers a usable mime type from Autorender’s metadata, falling back to the file extension. If it still doesn’t render, check that Autorender reports a correct format for that file.

​

Next steps