Media

Installation

Add the Media module to a DMS project, give it a file storage, and allow the dashboard's origin for direct uploads.

The Media module runs inside a project that loads @antelopejs/dms, a database module and a module implementing @antelopejs/interface-file-storage (for example @antelopejs/file-storage-local).

Requirements

Package	Version
`@antelopejs/dms`	`>=0.9.0 <1.0.0`
`@antelopejs/interface-dms`	`>=0.7.2 <1.0.0`
`@antelopejs/dms-frontend` (the renderer)	`0.6`
`@antelopejs/interface-dms-media`	`>=0.3.0 <0.4.0`

Media 0.5 runs on DMS 0.9 and renderer 0.6, with media interface 0.3. Media 0.4 uses media interface 0.2. On DMS 0.8, stay on Media 0.3 until you upgrade the backend, interface and renderer together: see Upgrading to DMS 0.9. See DMS installation for the toolchain and Troubleshooting for dependency and frontend integration errors.

Add it to a project

Add the module

Terminal

ajs project modules add @antelopejs/dms-media

Point the storage and the links at the public API URL

Files are uploaded straight to the storage, and copied links start with the module's publicBaseUrl. Point both at the api module's public base URL:

antelope.config.ts

export default defineConfig({
  name: "my-project",
  modules: {
    "dms-media": {
      source: { type: "package", package: "@antelopejs/dms-media", version: "^0.5.0" },
      config: {
        publicBaseUrl: "${@api.API_PUBLIC_BASE_URL}",
      },
    },
    "file-storage-local": {
      source: { type: "package", package: "@antelopejs/file-storage-local", version: ">=0.1.6 <1.0.0" },
      config: {
        storagePath: ".antelope/file-storage",
        baseUrl: "${@api.API_PUBLIC_BASE_URL}",
        defaultVisibility: "private",
      },
    },
    // dms, api, mongodb, auth-jwt, ...
  },
});

Allow the dashboard's origin

The browser asks the API to presign an upload, then PUTs the file straight to the storage URL, which is another origin than the dashboard's. List every origin the dashboard is served on in the api module's CORS settings:

antelope.config.ts

api: {
  config: {
    cors: {
      allowedOrigins: ["https://dms.example.com"],
    },
  },
},

Open the library

Restart the backend and the frontend. The module appears under Modules › Media, at /modules/media/overview.

The pages render on the server: the overview, the library's folder tree and listing (a folder, view or search link included) and the file page arrive with their data. The image editor's canvas, the dialogs and the asset field's picker read in the browser.

Without the CORS entry, listing and presigning work but the browser blocks the PUT (the console shows a CORS error on /file-storage/...). The upload queue then names the origin to add; retrying does not help until it is allowed.

Try it in the playground

Terminal

pnpm install --frozen-lockfile
pnpm --dir packages/dms-media/frontend-vue install --frozen-lockfile
pnpm --dir packages/dms-media/playground install --frozen-lockfile --ignore-workspace
pnpm dev                                 # backend on http://localhost:5010
pnpm --dir packages/dms-media frontend:dev   # dashboard on http://localhost:3001

The playground uses MongoDB at mongodb://localhost:27017 (set MONGO_URL to change it). Its Media demo page (/media-demo) holds every flavour of the AssetType picker: a cover image with a linked folder, a gallery with a maximum, a PDF-only spec sheet, documents in their own linked folder, and a free attachment.

Introduction

An asset library for the DMS, with folders, per-folder permissions, direct-to-storage uploads, stable delivery URLs, image sizes and light image editing.

Configuration

Every option of the Media module, the image size presets, and the upload refusals they produce.