kempo-media 0.2.3

package/admin/components/MediaLibrary.js

@@ -0,0 +1,304 @@
+import ShadowComponent from '/kempo-ui/components/ShadowComponent.js';
+import { html, css } from '/kempo-ui/lit-all.min.js';
+import Toast from '/kempo-ui/components/Toast.js';
+import Dialog from '/kempo-ui/components/Dialog.js';
+import { getMediaAssets, uploadMedia, deleteMediaAsset } from '/kempo-media/sdk.js';
+
+/*
+  The media library, used in two places: the admin screen at /admin/extension/kempo-media, and the
+  picker dialog the editor opens through window.kempo.openAssetPicker. Both want the same grid of
+  thumbnails with the same upload affordance, so it lives here once and the picker sets
+  `selectable`.
+
+  A grid rather than a k-table: the whole point of a media library is recognising an image by
+  looking at it, and a table row of filenames does not do that.
+*/
+
+const BASE = '/admin/extension/kempo-media';
+const PAGE_SIZE = 24;
+
+const formatBytes = bytes => {
+  if(bytes < 1024) return `${bytes} B`;
+  if(bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export default class MediaLibrary extends ShadowComponent {
+  static properties = {
+    kind: { type: String },
+    selectable: { type: Boolean },
+    canUpload: { type: Boolean, attribute: 'can-upload' },
+    canDelete: { type: Boolean, attribute: 'can-delete' },
+    assets: { type: Array, state: true },
+    total: { type: Number, state: true },
+    offset: { type: Number, state: true },
+    search: { type: String, state: true },
+    loading: { type: Boolean, state: true },
+    dragging: { type: Boolean, state: true },
+    uploads: { type: Array, state: true },
+    selectedId: { type: String, state: true },
+  };
+
+  constructor() {
+    super();
+    this.kind = '';
+    this.selectable = false;
+    this.canUpload = false;
+    this.canDelete = false;
+    this.assets = [];
+    this.total = 0;
+    this.offset = 0;
+    this.search = '';
+    this.loading = true;
+    this.dragging = false;
+    this.uploads = [];
+    this.selectedId = '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.load();
+  }
+
+  load = async () => {
+    this.loading = true;
+    const [error, data] = await getMediaAssets({
+      kind: this.kind || undefined,
+      search: this.search || undefined,
+      limit: PAGE_SIZE,
+      offset: this.offset,
+    });
+    this.loading = false;
+    if(error){
+      Toast.error(`Could not load the media library: ${error.msg}`);
+      return;
+    }
+    this.assets = data.assets;
+    this.total = data.total;
+  };
+
+  goTo = offset => {
+    this.offset = Math.max(0, offset);
+    this.load();
+  };
+
+  handleSearch = e => {
+    // Re-running the query on every keystroke would fire a request per character
+    clearTimeout(this._searchTimer);
+    const value = e.target.value;
+    this._searchTimer = setTimeout(() => {
+      this.search = value;
+      this.offset = 0;
+      this.load();
+    }, 250);
+  };
+
+  /*
+    Uploads run one at a time rather than in parallel: bodies are buffered in memory server-side,
+    so firing off ten large files at once is the surest way to make the server run out of it.
+  */
+  uploadFiles = async files => {
+    const queue = [...files];
+    if(!queue.length) return;
+
+    this.uploads = queue.map(file => ({ name: file.name, progress: 0, failed: false }));
+
+    for(const [index, file] of queue.entries()){
+      const [error] = await uploadMedia(file, {}, progress => {
+        this.uploads = this.uploads.map((u, i) => i === index ? { ...u, progress } : u);
+      });
+      if(error){
+        this.uploads = this.uploads.map((u, i) => i === index ? { ...u, failed: true } : u);
+        Toast.error(`${file.name}: ${error.msg}`);
+      }
+    }
+
+    const failed = this.uploads.filter(u => u.failed).length;
+    const succeeded = queue.length - failed;
+    if(succeeded) Toast.success(succeeded === 1 ? 'Uploaded' : `Uploaded ${succeeded} files`);
+
+    this.uploads = [];
+    this.offset = 0;
+    await this.load();
+  };
+
+  handleFileInput = e => {
+    this.uploadFiles(e.target.files);
+    e.target.value = ''; // so picking the same file twice in a row still fires a change event
+  };
+
+  handleDrop = e => {
+    e.preventDefault();
+    this.dragging = false;
+    if(this.canUpload) this.uploadFiles(e.dataTransfer.files);
+  };
+
+  handleDelete = (asset, e) => {
+    e.stopPropagation(); // a tile click selects; the delete button must not do both
+    Dialog.confirm(
+      `Delete “${asset.originalName}”? Anything already linking to it will break.`,
+      async confirmed => {
+        if(!confirmed) return;
+        const [error] = await deleteMediaAsset(asset.id);
+        if(error) return Toast.error(`Could not delete: ${error.msg}`);
+        Toast.success('Deleted');
+        // Step back a page when the last item on this one is gone
+        if(this.assets.length === 1 && this.offset > 0) this.offset -= PAGE_SIZE;
+        this.load();
+      },
+      { title: 'Delete asset', confirmText: 'Delete' }
+    );
+  };
+
+  handleSelect = asset => {
+    if(!this.selectable) return;
+    this.selectedId = asset.id;
+    this.dispatchEvent(new CustomEvent('asset-selected', { detail: { asset }, bubbles: true, composed: true }));
+  };
+
+  get selectedAsset() {
+    return this.assets.find(a => a.id === this.selectedId) || null;
+  }
+
+  renderTile(asset) {
+    const url = `/${asset.path}`;
+    return html`
+      <div
+        class="tile ${this.selectedId === asset.id ? 'selected' : ''} ${this.selectable ? 'selectable' : ''}"
+        @click=${() => this.handleSelect(asset)}
+        @dblclick=${() => this.selectable && this.dispatchEvent(new CustomEvent('asset-confirmed', { detail: { asset }, bubbles: true, composed: true }))}
+      >
+        <div class="preview">
+          ${asset.thumbnailPath
+            ? html`<img src="/${asset.thumbnailPath}" alt=${asset.altText || asset.originalName} loading="lazy" />`
+            : html`<img class="type-icon" src="${BASE}/icons/${asset.kind}.svg" alt=${asset.kind} />`}
+        </div>
+        <div class="meta">
+          <span class="name" title=${asset.originalName}>${asset.originalName}</span>
+          <span class="sub">${formatBytes(asset.sizeBytes)}${asset.width ? ` · ${asset.width}×${asset.height}` : ''}</span>
+        </div>
+        <div class="actions">
+          <a class="open" href=${url} target="_blank" rel="noopener" title="Open in a new tab" @click=${e => e.stopPropagation()}>↗</a>
+          ${this.canDelete ? html`<button type="button" class="delete" title="Delete" @click=${e => this.handleDelete(asset, e)}>✕</button>` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  render() {
+    const page = Math.floor(this.offset / PAGE_SIZE) + 1;
+    const pages = Math.max(1, Math.ceil(this.total / PAGE_SIZE));
+
+    return html`
+      <div
+        class="library ${this.dragging ? 'dragging' : ''}"
+        @dragover=${e => { e.preventDefault(); if(this.canUpload) this.dragging = true; }}
+        @dragleave=${() => this.dragging = false}
+        @drop=${this.handleDrop}
+      >
+        <div class="toolbar">
+          <input class="search" type="search" placeholder="Search by name…" @input=${this.handleSearch} />
+          <!-- .value keeps the control honest when kind is set from outside, as the picker does -->
+          <select class="kind" .value=${this.kind} @change=${e => { this.kind = e.target.value; this.offset = 0; this.load(); }}>
+            <option value="">All types</option>
+            <option value="image">Images</option>
+            <option value="video">Video</option>
+            <option value="audio">Audio</option>
+            <option value="model3d">3D models</option>
+            <option value="archive">Archives</option>
+          </select>
+          ${this.canUpload ? html`
+            <label class="upload-button">
+              Upload
+              <input type="file" multiple @change=${this.handleFileInput} />
+            </label>
+          ` : ''}
+        </div>
+
+        ${this.uploads.length ? html`
+          <div class="uploads">
+            ${this.uploads.map(u => html`
+              <div class="upload ${u.failed ? 'failed' : ''}">
+                <span class="upload-name">${u.name}</span>
+                <progress value=${u.progress} max="1"></progress>
+              </div>
+            `)}
+          </div>
+        ` : ''}
+
+        ${this.loading
+          ? html`<p class="empty">Loading…</p>`
+          : this.assets.length
+            ? html`<div class="grid">${this.assets.map(a => this.renderTile(a))}</div>`
+            : html`<p class="empty">
+                ${this.search || this.kind ? 'Nothing matches that filter.' : 'No media yet.'}
+                ${this.canUpload ? html`<br />Drop files here or use the Upload button.` : ''}
+              </p>`}
+
+        ${pages > 1 ? html`
+          <div class="pager">
+            <button type="button" ?disabled=${this.offset === 0} @click=${() => this.goTo(this.offset - PAGE_SIZE)}>Previous</button>
+            <span>Page ${page} of ${pages} · ${this.total} item${this.total === 1 ? '' : 's'}</span>
+            <button type="button" ?disabled=${page >= pages} @click=${() => this.goTo(this.offset + PAGE_SIZE)}>Next</button>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host { display: block; }
+    .library { position: relative; border-radius: var(--radius, 0.25rem); }
+    .library.dragging { outline: 2px dashed var(--c_primary, #06c); outline-offset: 0.5rem; }
+
+    /*
+      kempo-css is linked into this shadow root by ShadowComponent, and its global form-control rule
+      -- input:not([type=button]):not(...), select -- carries far more specificity than a plain
+      class selector here. It sets width 100%, which pushes every control onto its own row, and it
+      overrides display none on the hidden file input. Beating it needs !important; matching that
+      selector's specificity by hand would break the moment kempo-css edits it.
+    */
+    .toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
+    .search, .kind { padding: 0.5rem; border: 1px solid var(--c_border, #ccc); border-radius: var(--radius, 0.25rem); font: inherit; }
+    .toolbar .search { flex: 1 1 12rem; width: auto !important; min-width: 0; }
+    .toolbar .kind { flex: 0 0 auto; width: auto !important; }
+
+    .upload-button { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: var(--radius, 0.25rem);
+      background: var(--c_primary, #06c); color: #fff; cursor: pointer; font: inherit; white-space: nowrap; }
+    .upload-button input { display: none !important; }
+
+    .uploads { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
+    .upload { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.875rem; }
+    .upload progress { width: 10rem; }
+    .upload.failed .upload-name { text-decoration: line-through; opacity: 0.6; }
+
+    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; }
+
+    .tile { position: relative; border: 1px solid var(--c_border, #ccc); border-radius: var(--radius, 0.25rem); overflow: hidden; background: var(--c_bg, #fff); }
+    .tile.selectable { cursor: pointer; }
+    .tile.selectable:hover { border-color: var(--c_primary, #06c); }
+    .tile.selected { border-color: var(--c_primary, #06c); box-shadow: 0 0 0 2px var(--c_primary, #06c); }
+
+    .preview { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--c_bg_alt, #f4f4f4); overflow: hidden; }
+    .preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
+    .preview .type-icon { width: 3rem; height: 3rem; opacity: 0.5; }
+
+    .meta { display: flex; flex-direction: column; padding: 0.5rem; gap: 0.125rem; min-width: 0; }
+    .name { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .sub { font-size: 0.75rem; opacity: 0.65; }
+
+    .actions { position: absolute; top: 0.25rem; right: 0.25rem; display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.1s; }
+    .tile:hover .actions, .tile:focus-within .actions { opacity: 1; }
+    .actions a, .actions button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
+      border: none; border-radius: var(--radius, 0.25rem); background: rgba(0,0,0,0.6); color: #fff;
+      cursor: pointer; font: inherit; font-size: 0.75rem; text-decoration: none; }
+    .actions .delete:hover { background: var(--c_danger, #c00); }
+
+    .empty { padding: 2rem; text-align: center; opacity: 0.7; }
+    .pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: 0.875rem; }
+    .pager button { padding: 0.4rem 0.8rem; border: 1px solid var(--c_border, #ccc); border-radius: var(--radius, 0.25rem); cursor: pointer; font: inherit; }
+    .pager button[disabled] { opacity: 0.5; cursor: default; }
+  `;
+}
+
+customElements.define('kempo-media-library', MediaLibrary);

package/admin/icons/archive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="5" rx="1"/><path d="M5 8v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8"/><path d="M11 12h2v3h-2z"/></svg>

package/admin/icons/audio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l10-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="16" cy="16" r="3"/></svg>

package/admin/icons/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="m21 16-5-5L5 20"/></svg>

package/admin/icons/model3d.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 9 5v10l-9 5-9-5V7z"/><path d="m3 7 9 5 9-5M12 12v10"/></svg>

package/admin/icons/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="14" height="14" rx="2"/><path d="m16 10 6-3v10l-6-3z"/></svg>

package/admin/index.page.html

@@ -0,0 +1,35 @@
+<!--
+locked: true
+-->
+<page title="Media - Admin">
+<content>
+  <script type="module" src="/kempo/components/Permission.js"></script>
+  <script type="module" src="/admin/extension/kempo-media/components/MediaLibrary.js"></script>
+
+  <div class="p">
+    <h1>Media</h1>
+
+    <k-permission has="media:browse">
+      <kempo-media-library id="library"></kempo-media-library>
+    </k-permission>
+  </div>
+
+  <script type="module">
+    import { getAllCurrentUserPermissions } from '/kempo/sdk.js';
+
+    /*
+      canUpload / canDelete only decide whether the buttons are drawn. Every one of these
+      permissions is enforced again server-side on the route itself, so a hidden button is a
+      courtesy rather than the boundary.
+    */
+    const [error, data] = await getAllCurrentUserPermissions();
+    const permissions = error ? [] : (data?.permissions || []);
+
+    const library = document.getElementById('library');
+    if(library){
+      library.canUpload = permissions.includes('media:upload');
+      library.canDelete = permissions.includes('media:delete');
+    }
+  </script>
+</content>
+</page>

package/admin/nav.global.html

@@ -0,0 +1,3 @@
+<content id="kempo-media-nav" name="Media" owner="kempo-media" enabled="true" locked="true" location="admin-nav-extensions" priority="0">
+<k-aside-item icon="image" href="/admin/extension/kempo-media/" no-expand>Media</k-aside-item>
+</content>

package/docker-compose.yml

@@ -0,0 +1,22 @@
+# Database for kempo-media's own test suite. kempo's own tests use 5434 and kempo-demo uses 5433 —
+# this deliberately uses 5435 so all three can be up at once.
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: kempo-media-test-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: kempo
+      POSTGRES_PASSWORD: kempo_media_test_password
+      POSTGRES_DB: kempo_media_test
+    ports:
+      - "5435:5432"
+    volumes:
+      - postgres_test_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U kempo"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+volumes:
+  postgres_test_data:

package/drizzle.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'drizzle-kit';
+
+/*
+  Local/CI test-database setup only — this extension has no migrations of its own in production.
+  kempoMediaAsset is created the real way, via createTablesFromSchema at install time (see
+  install.js and installExtension in kempo's sdk), which the data-layer and API-contract test
+  suites exercise directly. This file exists so `npx drizzle-kit push` can stand up a throwaway
+  database with both kempo's core tables (user/session/permission/...) and this extension's own,
+  mirroring the schema array kempo's own app-drizzle.config.js template scaffolds into a real site.
+
+  No dotenv here on purpose: unlike a real kempo site, nothing in this repo's own runtime loads
+  .env either, so pulling it in only for this file would be one more dependency to explain rather
+  than one less step. DATABASE_URL needs to be a real environment variable — export it, or prefix
+  the command — in every documented workflow (CI's `env:` block, this repo's own README).
+*/
+export default defineConfig({
+  schema: [
+    './server/db/schema.js',
+    './node_modules/kempo/server/db/schema.js',
+  ],
+  out: './server/db/migrations',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL,
+  },
+});

package/install.js

@@ -0,0 +1,18 @@
+import { join } from 'path';
+import { mkdir } from 'fs/promises';
+
+/*
+  Uploads are written into the site's own public/ directory rather than anywhere inside this
+  package, so they survive `npm install` and are served by kempo-server's static file scanner —
+  which means binary uploads get HTTP range support (video and audio seeking) for free.
+
+  The file types this extension accepts are registered in kempo-server's default allowedMimes as of
+  3.2.0, so there is nothing for the site operator to configure.
+*/
+export default async () => {
+  const rootDir = join(process.cwd(), 'public');
+
+  await mkdir(join(rootDir, 'media', 'uploads'), { recursive: true });
+  await mkdir(join(rootDir, 'media', 'thumbnails'), { recursive: true });
+  console.log('[kempo-media] Created public/media/uploads and public/media/thumbnails.');
+};

package/kempo-config.json

@@ -0,0 +1,18 @@
+{
+  "docs": "https://github.com/dustinpoissant/kempo-media#readme",
+  "public-scope": "kempo-media",
+  "schema": "./server/db/schema.js",
+  "permissions": [
+    { "name": "media:browse", "description": "List and view media library assets" },
+    { "name": "media:upload", "description": "Upload new media assets" },
+    { "name": "media:update", "description": "Edit alt text / rename existing assets" },
+    { "name": "media:delete", "description": "Delete media assets" }
+  ],
+  "settings": [
+    { "name": "max_upload_size_mb", "value": "250", "type": "number", "description": "Maximum size, in MB, of a single uploaded file" },
+    { "name": "thumbnail_max_dimension", "value": "480", "type": "number", "description": "Longest edge, in pixels, of generated image thumbnails" }
+  ],
+  "groups": [
+    { "name": "kempo-media:editor", "description": "Can browse, upload, and edit media", "permissions": ["media:browse", "media:upload", "media:update"] }
+  ]
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "kempo-media",
+  "version": "0.2.3",
+  "description": "Media library extension for kempo — upload and manage images, video, audio, 3D models, and archives",
+  "license": "MIT",
+  "author": "Dustin Poissant",
+  "type": "module",
+  "main": "sdk.js",
+  "scripts": {
+    "build": "node scripts/build.js",
+    "test": "kempo-test -l minimal",
+    "link:local": "npm install ../kempo ../kempo-ui --no-save"
+  },
+  "kempo": {
+    "public-scope": "kempo-media"
+  },
+  "exports": {
+    "./install": "./install.js",
+    "./update": "./update.js",
+    "./sdk": "./sdk.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dustinpoissant/kempo-media.git"
+  },
+  "dependencies": {
+    "drizzle-orm": "^0.45.2",
+    "sharp": "^0.35.3"
+  },
+  "peerDependencies": {
+    "kempo": ">=4.2.26",
+    "kempo-server": ">=3.2.0",
+    "kempo-ui": ">=0.4.43"
+  },
+  "devDependencies": {
+    "drizzle-kit": "^0.31.10",
+    "kempo-testing-framework": "^1.4.11"
+  }
+}

package/public/api/media/DELETE.js

@@ -0,0 +1,21 @@
+import { join } from 'path';
+import { currentUserHasPermission } from 'kempo/server/sdk.js';
+import deleteMediaAsset from '../../../server/utils/media/deleteMediaAsset.js';
+
+const ROOT_DIR = join(process.cwd(), 'public');
+
+export default async (request, response) => {
+  const token = request.cookies.session_token;
+
+  const [permError, canDelete] = await currentUserHasPermission(token, 'media:delete');
+  if(permError) return response.status(permError.code).json({ error: permError.msg });
+  if(!canDelete) return response.status(403).json({ error: 'Insufficient permissions' });
+
+  const { id } = request.body || {};
+  if(!id) return response.status(400).json({ error: 'An asset id is required' });
+
+  const [error, data] = await deleteMediaAsset(id, { rootDir: ROOT_DIR });
+  if(error) return response.status(error.code).json({ error: error.msg });
+
+  response.json(data);
+};

package/public/api/media/GET.js

@@ -0,0 +1,38 @@
+import { currentUserHasPermission } from 'kempo/server/sdk.js';
+import getMediaAssets from '../../../server/utils/media/getMediaAssets.js';
+import getMediaAsset from '../../../server/utils/media/getMediaAsset.js';
+
+export default async (request, response) => {
+  const token = request.cookies.session_token;
+
+  /*
+    Browsing is gated even though the files themselves are public once uploaded — the listing is
+    what exposes every asset on the site at once, including ones nobody has linked yet.
+  */
+  /*
+    permError carries the distinction between "not signed in" and "signed in without the
+    permission" — a missing or expired cookie is a 401 the client can fix by signing in again,
+    where a 403 says retrying will not help. Discarding it collapses the two.
+  */
+  const [permError, canBrowse] = await currentUserHasPermission(token, 'media:browse');
+  if(permError) return response.status(permError.code).json({ error: permError.msg });
+  if(!canBrowse) return response.status(403).json({ error: 'Insufficient permissions' });
+
+  const { id, kind, search, limit, offset } = request.query;
+
+  if(id){
+    const [error, asset] = await getMediaAsset(id);
+    if(error) return response.status(error.code).json({ error: error.msg });
+    return response.json({ asset });
+  }
+
+  const [error, data] = await getMediaAssets({
+    kind,
+    search,
+    limit: parseInt(limit, 10) || 24,
+    offset: parseInt(offset, 10) || 0,
+  });
+  if(error) return response.status(error.code).json({ error: error.msg });
+
+  response.json(data);
+};

package/public/api/media/PATCH.js

@@ -0,0 +1,18 @@
+import { currentUserHasPermission } from 'kempo/server/sdk.js';
+import updateMediaAsset from '../../../server/utils/media/updateMediaAsset.js';
+
+export default async (request, response) => {
+  const token = request.cookies.session_token;
+
+  const [permError, canUpdate] = await currentUserHasPermission(token, 'media:update');
+  if(permError) return response.status(permError.code).json({ error: permError.msg });
+  if(!canUpdate) return response.status(403).json({ error: 'Insufficient permissions' });
+
+  const { id, altText, originalName } = request.body || {};
+  if(!id) return response.status(400).json({ error: 'An asset id is required' });
+
+  const [error, asset] = await updateMediaAsset(id, { altText, originalName });
+  if(error) return response.status(error.code).json({ error: error.msg });
+
+  response.json({ asset });
+};

package/public/api/media/POST.js

@@ -0,0 +1,57 @@
+import { join } from 'path';
+import { getSession, currentUserHasPermission, getSetting } from 'kempo/server/sdk.js';
+import parseMultipart, { extractBoundary } from '../../../server/utils/uploads/parseMultipart.js';
+import storeUpload from '../../../server/utils/uploads/storeUpload.js';
+import createMediaAsset from '../../../server/utils/media/createMediaAsset.js';
+
+const ROOT_DIR = join(process.cwd(), 'public');
+
+export default async (request, response) => {
+  const token = request.cookies.session_token;
+  const [sessionError, session] = await getSession({ token });
+  if(sessionError) return response.status(401).json({ error: 'Authentication required' });
+
+  const [permError, canUpload] = await currentUserHasPermission(token, 'media:upload');
+  if(permError) return response.status(permError.code).json({ error: permError.msg });
+  if(!canUpload) return response.status(403).json({ error: 'Insufficient permissions' });
+
+  const boundary = extractBoundary(request.headers['content-type']);
+  if(!boundary){
+    return response.status(400).json({ error: 'Expected a multipart/form-data upload' });
+  }
+
+  /*
+    request.buffer() rather than request.body: for a multipart content type kempo-server hands back
+    the body decoded as UTF-8 text, which mangles every byte of a binary file. buffer() is the only
+    accessor that preserves them (kempo-server >= 3.2.0).
+  */
+  const raw = await request.buffer();
+  const parts = parseMultipart(raw, boundary);
+
+  const filePart = parts.find(p => p.filename);
+  if(!filePart){
+    return response.status(400).json({ error: 'No file was included in the upload' });
+  }
+
+  const altPart = parts.find(p => p.name === 'alt' && !p.filename);
+
+  const [, maxUploadMb] = await getSetting('kempo-media', 'max_upload_size_mb', 250);
+  const [, thumbnailMaxDimension] = await getSetting('kempo-media', 'thumbnail_max_dimension', 480);
+
+  const [storeError, asset] = await storeUpload({
+    rootDir: ROOT_DIR,
+    filename: filePart.filename,
+    data: filePart.data,
+    mimeType: filePart.contentType,
+    altText: altPart ? altPart.data.toString('utf8') : '',
+    uploadedBy: session.user.id,
+    maxBytes: Number(maxUploadMb) * 1024 * 1024,
+    thumbnailMaxDimension: Number(thumbnailMaxDimension),
+  });
+  if(storeError) return response.status(storeError.code).json({ error: storeError.msg });
+
+  const [recordError, row] = await createMediaAsset(asset);
+  if(recordError) return response.status(recordError.code).json({ error: recordError.msg });
+
+  response.status(201).json({ asset: row });
+};