@autorender/strapi

A Strapi v5 admin plugin for AutoRender — a media/DAM (digital asset management) and image/video CDN platform. Use AutoRender as your Strapi Media Library upload provider, and browse + import existing AutoRender assets into Strapi without re-uploading any bytes.

Table of Contents

1. Plugin Features
2. Prerequisites
3. Installation
4. Essential Configuration
5. Media Upload Configuration
6. Using AutoRender Assets in Strapi
7. Permissions (RBAC)
8. Advanced: Programmatic Configuration (config/plugins.js)
9. Configure Security Middleware (CSP)
10. Troubleshooting
11. License

Plugin Features

• AutoRender Media Library: browse your AutoRender folders (shown as cards) and files directly inside the Strapi admin panel, with search and pagination.
• Import by reference: select AutoRender assets and import them into Strapi's own Media Library with a single click — Strapi stores the AutoRender CDN URL directly, it does not copy or re-host the file bytes.
• Upload straight from the browser: an "Upload" button on the Media Library page sends new files to AutoRender without leaving Strapi.
• Upload provider: optionally route new Strapi Media Library uploads straight to AutoRender instead of local disk storage, with configurable upload folder, tags, and random file-name prefixing.

This plugin intentionally does not implement signed URLs, private files, or a "Media Delivery" URL-rewriting feature. The AutoRender API always returns plain, permanent, public CDN links for every asset — there is no signed-URL or private-file capability to configure.

Prerequisites

Before you begin, you need:

• A Strapi project (v5.13.0 or later, within the v5 line)
• Node.js >= 18 and npm/yarn installed
• Administrator access to your Strapi instance
• An AutoRender account and API key

Installation

Install the plugin from your Strapi project's root directory:

npm install @autorender/strapi --save

Then rebuild your Strapi instance so the admin panel picks up the plugin:

npm run build
npm run develop

# OR, during development, with auto-reload for the admin panel:
npm run develop -- --watch-admin

The AutoRender entry will appear in the main navigation sidebar, and an AutoRender section will appear under Settings.

Essential Configuration

Open Settings > AutoRender in the Strapi admin panel and fill in the Basic Configuration section:

1. AutoRender API Key — the bearer token used to authenticate every request to the AutoRender API (Authorization: Bearer <api_key>). It's stored server-side and every AutoRender API call happens from the Strapi backend. Admins with only the Settings: Read permission (see Permissions (RBAC)) see a masked value in the Settings page; admins with Settings: Change can see and copy the real key, since they could already read it directly from the database or config/plugins.js.
2. Enable AutoRender integration — the master switch for the plugin. This must be on for AutoRender to be usable as an upload provider or for the Media Library page to function.

The API base URL (https://upload.autorender.io/api/v1) is fixed and not configurable — AutoRender's REST API only has one endpoint, so there's nothing to set.

Click Save.

Media Upload Configuration

Still on the Settings > AutoRender page, under Upload Configuration:

1. Upload new media to AutoRender — when enabled, every file uploaded through the Strapi Media Library (from the Content Manager, the Media Library page, anywhere) is sent to AutoRender instead of Strapi's local/default storage. When disabled, uploads use whatever provider was configured before installing this plugin. Enabling this does not retroactively migrate files you already uploaded to Strapi.
2. Upload Folder — a base folder path in AutoRender under which new uploads are stored (e.g. /strapi-uploads). Combined with any Strapi-side folder path if you use Strapi's Media Library folders.
3. Tags — a comma-separated list of tags applied to every file uploaded from Strapi (e.g. strapi, media).
4. Add random prefix to file names — when enabled, AutoRender prefixes uploaded file names to avoid collisions with existing files of the same name.

Using AutoRender Assets in Strapi

Open the AutoRender page from the main sidebar to browse your existing AutoRender library:

• 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 (Root / …) to navigate back up.
• Select one or more assets by clicking a tile (or its checkbox).
• 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, and the grid refreshes automatically once it's done.

Importing is by reference, not by copy: Strapi does not download or re-host the file bytes. Each imported Media Library entry simply stores the AutoRender asset's CDN url (and thumbnail, if AutoRender returned one, as the preview image). When you fetch that media through Strapi's API or render it in the admin panel, you'll see the AutoRender CDN URL directly — the same URL AutoRender's API returned. Deleting the Strapi entry does not delete the underlying AutoRender asset, and re-uploading or editing the asset in AutoRender is not reflected automatically in Strapi (you would need to re-import it).

Permissions (RBAC)

By default, only Super Admins can see and use the AutoRender pages. To grant access to other admin roles, go to Settings > Administration Panel > Roles, pick a role, and enable the permissions you want under the AutoRender section:

• Access AutoRender Media Library — lets a user open the Media Library page and browse/search AutoRender folders and files. Read-only: it does not allow importing or uploading anything.
• Import and upload AutoRender media — lets a user click Import selected and Upload. Grant this alongside the permission above; without it, those controls are disabled even if the user can see the page (a direct write request without this permission is still rejected with a 403).
• Settings: Read / Settings: Change — under the plugin's Settings category, these control who can view (masked API key) or edit the AutoRender configuration.

Advanced: Programmatic Configuration (config/plugins.js)

You can provide default configuration values in your Strapi project's config/plugins.js. These values are only used to seed the plugin's settings the first time the application boots — after that, whatever is saved through the admin Settings page (stored in the database) takes precedence.

module.exports = ({ env }) => ({
  autorender: {
    enabled: true,
    config: {
      // Basic Configuration
      apiKey: env('AUTORENDER_API_KEY'),

      // Upload Configuration
      uploadEnabled: true,
      uploadOptions: {
        folder: '/strapi-uploads',
        tags: ['strapi', 'media'],
        randomPrefix: false,
      },
    },
  },
});

Add the corresponding variables to your .env file:

AUTORENDER_API_KEY=your_autorender_api_key_here

Restart your Strapi server for the changes to take effect:

npm run develop

Configure Security Middleware (CSP)

To let your Strapi admin panel load images and videos served from AutoRender's CDN, update the Content Security Policy in config/middlewares.js. This only configures the CSP headers Strapi itself serves — a separately deployed frontend that renders Strapi media needs the same CDN domain added to its own img-src/media-src directives. Because this plugin's Media Library page never embeds a third-party iframe widget — unlike some other DAM plugins — you only need to extend img-src and media-src; no frame-src entry is required. The admin frontend only ever calls Strapi's own backend routes (browser connect-src 'self' is enough) — every AutoRender API call happens server-side and isn't subject to the browser's CSP at all.

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

If you use a custom domain with AutoRender, replace assets.autorender.io with that domain instead.

Troubleshooting

• "AutoRender integration is disabled" — turn on Enable AutoRender integration under Settings > AutoRender and save.
• "Missing AutoRender API key" — add a valid API key under Settings > AutoRender, or via config/plugins.js (see above).
• A user can browse but "Import selected" / "Upload" are disabled — see Permissions (RBAC); the two Media Library permissions are separate. A direct write request without that permission still returns a 403.
• Browsing occasionally fails with a generic network error, but works on retry — the API client automatically retries transient connection failures for idempotent GET/HEAD requests (browsing folders/files) only. A failure that survives several automatic retries usually means AutoRender itself is unreachable or the API key is invalid — check both before retrying manually.
• An import or upload fails with a generic network error — writes (POST) are never retried automatically, since retrying a write whose response was lost could create a duplicate asset. Confirm whether the import/upload actually completed in AutoRender before retrying it yourself.
• An imported asset shows as a generic file instead of an image — this plugin infers a usable mime type from AutoRender's own metadata, falling back to the file extension; if an asset still doesn't render, check that AutoRender itself reports a correct format for it.

License

This project is licensed under the MIT License — see the LICENSE file for details.