nuxt-media-library 0.0.57 → 0.0.59

package/README.md

@@ -237,9 +237,11 @@ merges the layers, so every widget on the site can use any backend by name.
 export default defineNuxtConfig({
   modules: ['nuxt-media-library'],
   mediaLibrary: {
-    serviceUploads: {
-      backends: { videos: { start: '/api/videos/uploads' } },
-      // refresh defaults to `${start}/:sessionId/grant`
+    backends: {
+      videos: {
+        upload: { start: '/api/videos/uploads' }, // refresh defaults to `${start}/:sessionId/grant`
+        claim: '/api/videos/uploads/:sessionId/attach', // py_client on_attach
+      },
     },
   },
 })
@@ -257,17 +259,26 @@ export default defineNuxtConfig({
 ```vue
 <MLMediaGallery
   v-model="lesson.mediaIds"
-  service="videos"
+  backend="videos"
   profile="lesson-video"
   :service-body="{ context: { lessonId } }"
   @uploaded="(assetId, role, sessionId) => attach(assetId, sessionId)"
 />
 ```
 
-- `service` on `MLMediaGallery`, `MLMediaField` and the file picker (and
-  `useMLMediaUpload`): a backend name, or `{ start }` for a one-off. Without
-  it, widgets upload through Nuxt's own route as before; an unknown name
-  fails that upload with a message naming the missing backend.
+- `backend` on `MLMediaGallery`, `MLMediaField` and the file picker (and
+  `useMLMediaUpload`): a name in `mediaLibrary.backends`. `service` is its
+  older name and still takes `{ start }` for a one-off; `backend` wins.
+  Without either, widgets upload through Nuxt's own route as before; an
+  unknown name fails that upload with a message naming the missing backend.
+- Each backend has a `kind`: `media-library` (the default) or `media-kit`.
+  This version uploads only to `media-library` backends; a `media-kit` one
+  fails the upload with a clear message.
+- With `claim`, the upload queue attaches files whose page was left before
+  the widget attached them (`POST { assetId, profile }`; 409 counts as
+  attached). The tray shows a refusal with "Add again".
+- `mediaLibrary.serviceUploads.backends` still works: each entry becomes a
+  `media-library` backend with that `upload` and no `claim`.
 - The start request carries the file (`mimeType`, `sizeBytes`, `filename`),
   `profile` (each role's, in a gallery with roles) and `service-body`. The
   service's profile decides kind, visibility and processing, so
@@ -283,6 +294,28 @@ export default defineNuxtConfig({
 - There is no default backend: each layer's widgets name theirs. The module
   only stores the paths; each layer's own routes reach its service.
 
+### File meta from the widgets
+
+`MLMediaField` and `MLMediaGallery` report what they know about their files:
+name, extension, MIME type, kind, size, duration, width, height and pages.
+
+```vue
+<MLMediaField v-model="lesson.videoId" v-model:meta="videoMeta" @meta="m => console.log(m?.durationSeconds)" />
+
+<MLMediaGallery v-model="post.mediaIds" v-model:meta="mediaMeta" @meta="(assetId, m) => …" />
+```
+
+- `v-model:meta` is output only: `MediaFileMeta | null` on the field, a map
+  by asset ID on the gallery (every role). `@meta` fires per file that
+  changed, with null when it left.
+- A file uploaded in this tab is read in the browser right away
+  (`source: 'local'`, duration and size from a hidden video, audio or image
+  element). The media library's data replaces it once loaded
+  (`source: 'server'`); values it has no rendition for yet stay local.
+- A file needs an asset ID before it has meta: during the byte upload it
+  has none yet.
+- `useMLMediaMeta(ids, getAsset)` gives the same map for your own lists.
+
 ### Vue installation (non-Nuxt)
 
 ```bash

package/dist/module.d.mts

@@ -1,5 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
+import { MediaBackends } from '../dist/runtime/utils/backends.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -43,9 +44,8 @@ interface ModuleOptions {
      * public API root with `/v1`, or a proxy route); with `proxy` it defaults
      * to the pass-through route.
      *
-     * `backends` names the services that start uploads, so widgets can use
-     * `service="videos"`. Each service's Nuxt layer registers its own; Nuxt
-     * merges them across layers. Paths only: each layer serves its routes.
+     * `backends`: older form of `mediaLibrary.backends` (start/refresh only).
+     * Each entry becomes a `media-library` backend with that `upload`.
      */
     serviceUploads?: {
         proxy?: boolean;
@@ -62,6 +62,16 @@ interface ModuleOptions {
      * pass-through are still registered.
      */
     manageProxy?: boolean;
+    /**
+     * The backend registry: named places widgets upload to and read from
+     * (`<MLMediaGallery backend="videos" />`). Each entry has a `kind`
+     * (`media-library`, the default, or `media-kit`) and its routes: `upload`
+     * (`{ start, refresh? }`, py_client `create_upload_router`), `claim`
+     * (attach a finished upload, `/…/:sessionId/attach`). Each service's Nuxt
+     * layer registers its own; Nuxt merges them. Paths only: each layer serves
+     * its routes.
+     */
+    backends?: MediaBackends;
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.d.ts

@@ -1,5 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
+import { MediaBackends } from '../dist/runtime/utils/backends.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -43,9 +44,8 @@ interface ModuleOptions {
      * public API root with `/v1`, or a proxy route); with `proxy` it defaults
      * to the pass-through route.
      *
-     * `backends` names the services that start uploads, so widgets can use
-     * `service="videos"`. Each service's Nuxt layer registers its own; Nuxt
-     * merges them across layers. Paths only: each layer serves its routes.
+     * `backends`: older form of `mediaLibrary.backends` (start/refresh only).
+     * Each entry becomes a `media-library` backend with that `upload`.
      */
     serviceUploads?: {
         proxy?: boolean;
@@ -62,6 +62,16 @@ interface ModuleOptions {
      * pass-through are still registered.
      */
     manageProxy?: boolean;
+    /**
+     * The backend registry: named places widgets upload to and read from
+     * (`<MLMediaGallery backend="videos" />`). Each entry has a `kind`
+     * (`media-library`, the default, or `media-kit`) and its routes: `upload`
+     * (`{ start, refresh? }`, py_client `create_upload_router`), `claim`
+     * (attach a finished upload, `/…/:sessionId/attach`). Each service's Nuxt
+     * layer registers its own; Nuxt merges them. Paths only: each layer serves
+     * its routes.
+     */
+    backends?: MediaBackends;
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "media-library",
   "configKey": "mediaLibrary",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,6 +1,7 @@
 import { existsSync, readdirSync } from 'node:fs';
 import { join } from 'node:path';
 import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addServerHandler, useLogger, addPlugin } from '@nuxt/kit';
+import { normalizeBackends } from '../dist/runtime/utils/backends.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -22,23 +23,6 @@ function browserBaseURL(existingPublic, publicBaseURL) {
 }
 
 const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
-function serviceBackends(backends, logger) {
-  const out = {};
-  for (const [name, backend] of Object.entries(backends ?? {})) {
-    if (!backend || typeof backend.start !== "string" || !backend.start) {
-      logger.warn(`mediaLibrary.serviceUploads.backends.${name} has no start path; ignored.`);
-      continue;
-    }
-    if (backend.refresh && !backend.refresh.includes(":sessionId")) {
-      logger.warn(`mediaLibrary.serviceUploads.backends.${name}.refresh needs a :sessionId placeholder; using the default.`);
-    }
-    out[name] = {
-      start: backend.start,
-      ...backend.refresh?.includes(":sessionId") ? { refresh: backend.refresh } : {}
-    };
-  }
-  return out;
-}
 function appCatchAlls(layers) {
   const found = [];
   for (const { config } of layers) {
@@ -171,6 +155,10 @@ const module$1 = defineNuxtModule({
     if (existingPublic.proxyUploads === false && !existingPublic.baseURL && !options.publicBaseURL) {
       logger.warn("proxyUploads is false but no public media library address is set: set mediaLibrary.publicBaseURL. baseURL is server-side only.");
     }
+    const backends = {
+      ...normalizeBackends(options.backends, options.serviceUploads?.backends, (m) => logger.warn(m)),
+      ...normalizeBackends(existingPublic.backends, existingPublic.serviceUploadBackends, (m) => logger.warn(m))
+    };
     nuxt.options.runtimeConfig.public.mediaLibrary = {
       ...existingPublic,
       baseURL: browserBaseURL(existingPublic.baseURL, options.publicBaseURL),
@@ -186,8 +174,12 @@ const module$1 = defineNuxtModule({
       headers: publicHeaders.headers,
       // Where useMLServiceUpload sends parts (NUXT_PUBLIC_MEDIA_LIBRARY_SERVICE_UPLOAD_BASE_URL).
       serviceUploadBaseURL: existingPublic.serviceUploadBaseURL || options.serviceUploads?.baseURL || (options.serviceUploads?.proxy ? SERVICE_UPLOADS_ROUTE : ""),
-      // Names widgets can pass as `service` (NUXT_PUBLIC_MEDIA_LIBRARY_SERVICE_UPLOAD_BACKENDS).
-      serviceUploadBackends: { ...serviceBackends(options.serviceUploads?.backends, logger), ...existingPublic.serviceUploadBackends }
+      // The backend registry (NUXT_PUBLIC_MEDIA_LIBRARY_BACKENDS): names widgets pass as `backend`.
+      backends,
+      // Older form, kept for code that reads it: each backend's upload routes.
+      serviceUploadBackends: Object.fromEntries(
+        Object.entries(backends).flatMap(([name, b]) => b.upload ? [[name, b.upload]] : [])
+      )
     };
     addPlugin({
       src: resolver.resolve("./runtime/plugins/config")

package/dist/runtime/components/MLMedia/Field.d.vue.ts

@@ -1,3 +1,4 @@
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
@@ -18,10 +19,12 @@ type __VLS_Props = {
     /** Upload profile name for new files. */
     profile?: string | null;
     /**
-     * Start uploads at a backend service instead of Nuxt's own route: a name
-     * registered under `mediaLibrary.serviceUploads.backends` (e.g. "videos"),
-     * or `{ start }`. See useMLMediaUpload.
+     * The backend registered under `mediaLibrary.backends` that uploads go to
+     * (e.g. "videos"). Its `claim` route attaches files whose page was left
+     * before they finished. Wins over `service`.
      */
+    backend?: string | null;
+    /** Older name for `backend`; also takes an inline `{ start }`. See useMLMediaUpload. */
     service?: MediaUploadOptions['service'];
     /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
     serviceBody?: Record<string, unknown> | null;
@@ -40,33 +43,43 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
     /** Alt text for the file, stored on the host record. Edited in the media editor. */
     'alt'?: string | undefined;
+    /**
+     * The file's meta (name, extension, MIME type, kind, size, duration,
+     * dimensions), or null when empty. Output only: the field writes it.
+     */
+    'meta'?: MediaFileMeta | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
+    "update:meta": (value: MediaFileMeta | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
-    label: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    maxSize: number | null;
-    required: boolean;
-    removeLabel: string;
+    label: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    required: boolean;
+    removeLabel: string;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

package/dist/runtime/components/MLMedia/Field.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { useMLMediaField } from "../../composables/useMLMediaField";
 import { useMLFilePicker } from "../../composables/useMLFilePicker";
 import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { useMLMediaMeta } from "../../composables/useMLMediaMeta";
 import { assetDimensions, assetDurationSeconds, assetName, assetSizeBytes, formatBytes, formatDuration } from "../../utils/assetFormat";
 const props = defineProps({
   accept: { type: [Array, String], required: false, default: "" },
@@ -16,6 +17,7 @@ const props = defineProps({
   processingConfig: { type: Object, required: false, default: void 0 },
   collectionName: { type: [String, null], required: false, default: null },
   profile: { type: [String, null], required: false, default: null },
+  backend: { type: [String, null], required: false, default: null },
   service: { type: null, required: false, default: void 0 },
   serviceBody: { type: [Object, null], required: false, default: null },
   picker: { type: Boolean, required: false, default: true },
@@ -26,7 +28,8 @@ const props = defineProps({
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded"]);
+const meta = defineModel("meta", { type: [Object, null], ...{ default: null } });
+const emit = defineEmits(["uploaded", "meta"]);
 const field = useMLMediaField(model, {
   accept: () => props.accept,
   maxSize: () => props.maxSize,
@@ -34,12 +37,20 @@ const field = useMLMediaField(model, {
   processingConfig: props.processingConfig,
   collectionName: props.collectionName,
   profile: props.profile,
+  backend: props.backend,
   service: props.service,
   serviceBody: props.serviceBody,
   label: props.label || void 0,
   onUploaded: (id, sessionId) => emit("uploaded", id, sessionId)
 });
 const { state, asset, upload, message } = field;
+const metaById = useMLMediaMeta(() => [model.value], (id) => id === model.value ? asset.value : null);
+const currentMeta = computed(() => model.value ? metaById.value[model.value] ?? null : null);
+watch(() => JSON.stringify(currentMeta.value), (now, before) => {
+  if (now === before || before === void 0 && !currentMeta.value) return;
+  meta.value = currentMeta.value;
+  emit("meta", currentMeta.value);
+}, { immediate: true });
 const helpText = computed(() => {
   if (props.hint) return props.hint;
   const parts = [field.acceptLabel.value === "any file" ? "" : `Takes ${field.acceptLabel.value}`];
@@ -77,6 +88,7 @@ const uploadOptions = computed(() => ({
   processingConfig: props.processingConfig,
   collectionName: props.collectionName,
   profile: props.profile,
+  backend: props.backend,
   service: props.service,
   serviceBody: props.serviceBody
 }));

package/dist/runtime/components/MLMedia/Field.vue.d.ts

@@ -1,3 +1,4 @@
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
@@ -18,10 +19,12 @@ type __VLS_Props = {
     /** Upload profile name for new files. */
     profile?: string | null;
     /**
-     * Start uploads at a backend service instead of Nuxt's own route: a name
-     * registered under `mediaLibrary.serviceUploads.backends` (e.g. "videos"),
-     * or `{ start }`. See useMLMediaUpload.
+     * The backend registered under `mediaLibrary.backends` that uploads go to
+     * (e.g. "videos"). Its `claim` route attaches files whose page was left
+     * before they finished. Wins over `service`.
      */
+    backend?: string | null;
+    /** Older name for `backend`; also takes an inline `{ start }`. See useMLMediaUpload. */
     service?: MediaUploadOptions['service'];
     /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
     serviceBody?: Record<string, unknown> | null;
@@ -40,33 +43,43 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
     /** Alt text for the file, stored on the host record. Edited in the media editor. */
     'alt'?: string | undefined;
+    /**
+     * The file's meta (name, extension, MIME type, kind, size, duration,
+     * dimensions), or null when empty. Output only: the field writes it.
+     */
+    'meta'?: MediaFileMeta | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
+    "update:meta": (value: MediaFileMeta | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
-    label: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    maxSize: number | null;
-    required: boolean;
-    removeLabel: string;
+    label: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    required: boolean;
+    removeLabel: string;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

package/dist/runtime/components/MLMedia/FileFacts.d.vue.ts

@@ -10,8 +10,8 @@ type __VLS_Props = {
     title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    asset: AssetDetail | DeliveryAsset | null;
     title: string;
+    asset: AssetDetail | DeliveryAsset | null;
     items: AssetFact[];
     extra: AssetFact[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/FileFacts.vue.d.ts

@@ -10,8 +10,8 @@ type __VLS_Props = {
     title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    asset: AssetDetail | DeliveryAsset | null;
     title: string;
+    asset: AssetDetail | DeliveryAsset | null;
     items: AssetFact[];
     extra: AssetFact[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/FilePicker.d.vue.ts

@@ -14,11 +14,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onClose?: ((ids: string[] | null) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/MLMedia/FilePicker.vue.d.ts

@@ -14,11 +14,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onClose?: ((ids: string[] | null) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/MLMedia/FilePickerPanel.d.vue.ts

@@ -24,11 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onDone?: ((ids: string[]) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/FilePickerPanel.vue.d.ts

@@ -24,11 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onDone?: ((ids: string[]) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/Gallery.d.vue.ts

@@ -1,4 +1,5 @@
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 export interface MediaGalleryRole {
     /** Shown on chips, badges and menus, e.g. "Cover". */
     label: string;
@@ -35,10 +36,12 @@ type __VLS_Props = {
     /** Upload profile for the single list (with `profiles`, each role has its own). */
     profile?: string | null;
     /**
-     * Start uploads at a backend service instead of Nuxt's own route: a name
-     * registered under `mediaLibrary.serviceUploads.backends` (e.g. "videos"),
-     * or `{ start }`. Each role's profile is sent with the start request.
+     * The backend registered under `mediaLibrary.backends` that uploads go to
+     * (e.g. "videos"). Its `claim` route attaches files whose page was left
+     * before they finished. Each role's profile is sent with the start request. Wins over `service`.
      */
+    backend?: string | null;
+    /** Older name for `backend`; also takes an inline `{ start }`. */
     service?: MediaUploadOptions['service'];
     /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
     serviceBody?: Record<string, unknown> | null;
@@ -50,34 +53,44 @@ type __VLS_Props = {
 type __VLS_ModelProps = {
     modelValue?: string[];
     'alt'?: Record<string, string> | undefined;
+    /**
+     * Meta of every file in the gallery (all roles), by asset ID: name,
+     * extension, MIME type, kind, size, duration, dimensions. Output only.
+     */
+    'meta'?: Record<string, MediaFileMeta>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, role: string, sessionId: string | null) => any;
+    meta: (assetId: string, meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    "update:meta": (value: Record<string, MediaFileMeta>) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, role: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((assetId: string, meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

package/dist/runtime/components/MLMedia/Gallery.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
 import { $fetch } from "ofetch";
+import { watchMediaMeta } from "../../composables/useMLMediaMeta";
 import { kindForFile } from "../../utils/fileAccept";
 import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
 import GallerySection from "./GallerySection.vue";
@@ -19,6 +20,7 @@ const props = defineProps({
   processingConfig: { type: Object, required: false, default: void 0 },
   collectionName: { type: [String, null], required: false, default: null },
   profile: { type: [String, null], required: false, default: null },
+  backend: { type: [String, null], required: false, default: null },
   service: { type: null, required: false, default: void 0 },
   serviceBody: { type: [Object, null], required: false, default: null },
   picker: { type: Boolean, required: false, default: true },
@@ -28,7 +30,12 @@ const props = defineProps({
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded", "update:profiles"]);
+const meta = defineModel("meta", { type: Object, ...{ default: () => ({}) } });
+const emit = defineEmits(["uploaded", "update:profiles", "meta"]);
+const sectionMeta = ref({});
+watchMediaMeta(computed(() => sectionMeta.value), (all) => {
+  meta.value = all;
+}, (id, m) => emit("meta", id, m));
 const roles = computed(() => Object.entries(props.profiles ?? {}).map(([key, r]) => ({ key, ...r })));
 const hasRoles = computed(() => roles.value.length > 0);
 const single = (r) => r.max === 1;
@@ -275,6 +282,7 @@ function chipCount(key, max) {
     :profile="defaultRole?.profile ?? null"
     :profile-for="profileFor"
     :on-route-files="routeFiles"
+    :backend="backend"
     :service="service"
     :service-body="serviceBody"
     :disabled="disabled"
@@ -294,6 +302,7 @@ function chipCount(key, max) {
     :on-add="onAdd"
     @update:model-value="onUnionUpdate"
     @uploaded="onUploaded"
+    @meta="(m) => sectionMeta = m"
   >
     <template #toolbar>
       <div class="flex flex-col gap-1.5">
@@ -353,6 +362,7 @@ function chipCount(key, max) {
     :processing-config="processingConfig"
     :collection-name="collectionName"
     :profile="profile"
+    :backend="backend"
     :service="service"
     :service-body="serviceBody"
     :picker="picker"
@@ -360,5 +370,6 @@ function chipCount(key, max) {
     :editor="editor"
     :on-open="onOpen"
     @uploaded="(id, sessionId) => emit('uploaded', id, '', sessionId)"
+    @meta="(m) => sectionMeta = m"
   />
 </template>