nuxt-media-library 0.0.50 → 0.0.52

package/README.md

@@ -47,8 +47,11 @@ export default defineNuxtConfig({
   mediaLibrary: {
     // Auto-register Vue components from src/runtime/components
     components: true,
-    // Chunk uploader config (used by MlFileUpload)
-    baseURL: 'https://api.example.com',
+    // Where the Nuxt server reaches the media library (with /v1). Server-side
+    // only, never sent to browsers; prefer NUXT_MEDIA_LIBRARY_BASE_URL.
+    baseURL: 'http://media-library.internal/v1',
+    // Only for direct browser uploads (proxyUploads: false): a public address.
+    // publicBaseURL: 'https://media.example.com/v1',
     // Uploads always go through Nuxt server (/api/media-library/uploads/*)
     routes: {
       createSession: '/uploads/sessions',
@@ -60,11 +63,18 @@ export default defineNuxtConfig({
     partSize: 8 * 1024 * 1024,
     concurrency: 3,
     checksum: { algorithm: 'SHA-256', perPart: true, final: true },
-    headers: {},
+    // Sent to browsers too, except credentials: Authorization, Cookie,
+    // Proxy-Authorization and X-Api-Key stay server-side (the proxies add them).
+    headers: { 'X-Tenant': 'acme' },
   },
 })
 ```
 
+Nuxt puts the public runtime config in every page, so the module never copies
+`baseURL` or credential headers there. Set the media library's internal
+address and any service token only server-side
+(`NUXT_MEDIA_LIBRARY_BASE_URL`, `NUXT_MEDIA_LIBRARY_SERVICE_TOKEN`).
+
 ### Nuxt usage
 
 ```vue
@@ -164,7 +174,7 @@ app's decision, not the service's:
 // nuxt.config.ts
 export default defineNuxtConfig({
   mediaLibrary: {
-    baseURL: process.env.MEDIA_LIBRARY_URL,      // server side, e.g. http://media-library.internal/v1
+    // server side only: set NUXT_MEDIA_LIBRARY_BASE_URL (e.g. http://media-library.internal/v1)
     serviceUploads: { proxy: true },             // parts go through /api/media-library/service-uploads
     // or, direct to the media library (needs CORS for the site):
     // serviceUploads: { baseURL: 'https://media.example.com/v1' },
@@ -198,6 +208,63 @@ await $fetch(`/api/videos/lessons/${lessonId}/video`, { method: 'PUT', body: { s
   grant mode replaces the browser's grant with its own, and the service's
   `claim_upload` rejects the session.
 
+#### One layer per service, widgets by backend name
+
+Each service can ship a Nuxt layer that registers its upload backend and
+serves its own routes (start, refresh, attach, data) to its service. Nuxt
+merges the layers, so every widget on the site can use any backend by name.
+
+```ts
+// itq-videos-layer/nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['nuxt-media-library'],
+  mediaLibrary: {
+    serviceUploads: {
+      backends: { videos: { start: '/api/videos/uploads' } },
+      // refresh defaults to `${start}/:sessionId/grant`
+    },
+  },
+})
+```
+
+```ts
+// the site
+export default defineNuxtConfig({
+  extends: ['itq-videos-layer', 'itq-courses-layer'],
+  modules: ['nuxt-media-library'],
+  mediaLibrary: { serviceUploads: { proxy: true } },   // where parts go, for every backend
+})
+```
+
+```vue
+<MLMediaGallery
+  v-model="lesson.mediaIds"
+  service="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.
+- 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
+  `visibility`, `processing-config` and `collection-name` are not used with
+  `service`.
+- `uploaded` also gives the upload's `sessionId` (gallery:
+  `(assetId, role, sessionId)`, field: `(assetId, sessionId)`), including
+  files uploaded from the picker and chosen. Send both to the service's
+  attach endpoint: its `claim_upload` needs them.
+- Processing progress uses `/api/media-library/manage/assets/resolve` and
+  the processing stream, so the app's proxy must allow `read` on a file the
+  user just uploaded.
+- 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.
+
 ### Vue installation (non-Nuxt)
 
 ```bash

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -14,7 +15,17 @@ interface ChunkUploaderRoutesConfig {
 }
 interface ModuleOptions {
     components?: boolean;
+    /**
+     * Where the Nuxt server reaches the media library, with `/v1` (often an
+     * internal address). Server-side only: never sent to browsers. Prefer
+     * NUXT_MEDIA_LIBRARY_BASE_URL at runtime.
+     */
     baseURL?: string;
+    /**
+     * The media library address browsers use for direct uploads
+     * (`proxyUploads: false`), with `/v1`. Public: only set a public address.
+     */
+    publicBaseURL?: string;
     routes?: ChunkUploaderRoutesConfig;
     partSize?: number;
     concurrency?: number;
@@ -31,10 +42,15 @@ interface ModuleOptions {
      * `baseURL` is where the browser sends those uploads (the media library's
      * 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.
      */
     serviceUploads?: {
         proxy?: boolean;
         baseURL?: string;
+        backends?: Record<string, ServiceUploadBackend>;
     };
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";

package/dist/module.d.ts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -14,7 +15,17 @@ interface ChunkUploaderRoutesConfig {
 }
 interface ModuleOptions {
     components?: boolean;
+    /**
+     * Where the Nuxt server reaches the media library, with `/v1` (often an
+     * internal address). Server-side only: never sent to browsers. Prefer
+     * NUXT_MEDIA_LIBRARY_BASE_URL at runtime.
+     */
     baseURL?: string;
+    /**
+     * The media library address browsers use for direct uploads
+     * (`proxyUploads: false`), with `/v1`. Public: only set a public address.
+     */
+    publicBaseURL?: string;
     routes?: ChunkUploaderRoutesConfig;
     partSize?: number;
     concurrency?: number;
@@ -31,10 +42,15 @@ interface ModuleOptions {
      * `baseURL` is where the browser sends those uploads (the media library's
      * 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.
      */
     serviceUploads?: {
         proxy?: boolean;
         baseURL?: string;
+        backends?: Record<string, ServiceUploadBackend>;
     };
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";

package/dist/module.json

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

package/dist/module.mjs

@@ -1,10 +1,42 @@
-import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addServerHandler, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addServerHandler, useLogger, addPlugin } from '@nuxt/kit';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
 export * from '../dist/runtime/types/asset.js';
 
+const CREDENTIAL_HEADERS = ["authorization", "proxy-authorization", "cookie", "x-api-key"];
+function browserHeaders(headers) {
+  if (!headers || typeof headers !== "object") return { headers: {}, dropped: [] };
+  const kept = {};
+  const dropped = [];
+  for (const [name, value] of Object.entries(headers)) {
+    if (CREDENTIAL_HEADERS.includes(name.toLowerCase())) dropped.push(name);
+    else kept[name] = value;
+  }
+  return { headers: kept, dropped };
+}
+function browserBaseURL(existingPublic, publicBaseURL) {
+  return 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;
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "media-library",
@@ -38,7 +70,10 @@ const module$1 = defineNuxtModule({
     const envTenantHeader = process.env.NUXT_MEDIA_LIBRARY_HEADERS_X_TENANT;
     const envHeaders = envTenantHeader ? { "X-tenant": envTenantHeader } : {};
     const existingHeaders = typeof existingPrivate.headers === "object" ? existingPrivate.headers : {};
-    const resolvedHeaders = { ...existingHeaders };
+    const optionCredentials = Object.fromEntries(
+      browserHeaders(options.headers).dropped.map((name) => [name, options.headers[name]])
+    );
+    const resolvedHeaders = { ...optionCredentials, ...existingHeaders };
     for (const [key, value] of Object.entries(envHeaders)) {
       if (!resolvedHeaders[key]) {
         resolvedHeaders[key] = value;
@@ -105,9 +140,17 @@ const module$1 = defineNuxtModule({
       // grants). Declared so NUXT_MEDIA_LIBRARY_SERVICE_TOKEN applies.
       serviceToken: existingPrivate.serviceToken ?? ""
     };
+    const logger = useLogger("media-library");
+    const publicHeaders = browserHeaders(existingPublic.headers ?? options.headers);
+    if (publicHeaders.dropped.length) {
+      logger.warn(`mediaLibrary.headers: ${publicHeaders.dropped.join(", ")} kept server-side, not sent to browsers.`);
+    }
+    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.");
+    }
     nuxt.options.runtimeConfig.public.mediaLibrary = {
       ...existingPublic,
-      baseURL: existingPublic.baseURL ?? options.baseURL ?? "",
+      baseURL: browserBaseURL(existingPublic.baseURL, options.publicBaseURL),
       routes: existingPublic.routes ?? routes,
       proxyUploads: existingPublic.proxyUploads ?? true,
       partSize: existingPublic.partSize ?? options.partSize ?? 8 * 1024 * 1024,
@@ -117,9 +160,11 @@ const module$1 = defineNuxtModule({
         perPart: existingPublic.checksum?.perPart ?? options.checksum?.perPart ?? true,
         final: existingPublic.checksum?.final ?? options.checksum?.final ?? true
       },
-      headers: existingPublic.headers ?? options.headers ?? {},
+      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 : "")
+      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 }
     };
     addPlugin({
       src: resolver.resolve("./runtime/plugins/config")

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

@@ -39,11 +39,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onFiles?: ((files: File[]) => any) | undefined;
     onRejected?: ((files: RejectedFile[]) => any) | undefined;
 }>, {
+    title: string;
     variant: "area" | "overlay";
     compact: boolean;
     disabled: boolean;
     multiple: boolean;
-    title: string;
     accept: string;
     maxSize: number | null;
     maxFiles: number | null;

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

@@ -39,11 +39,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onFiles?: ((files: File[]) => any) | undefined;
     onRejected?: ((files: RejectedFile[]) => any) | undefined;
 }>, {
+    title: string;
     variant: "area" | "overlay";
     compact: boolean;
     disabled: boolean;
     multiple: boolean;
-    title: string;
     accept: string;
     maxSize: number | null;
     maxFiles: number | null;

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

@@ -15,6 +15,16 @@ type __VLS_Props = {
     visibility?: MediaUploadOptions['visibility'];
     processingConfig?: MediaUploadOptions['processingConfig'];
     collectionName?: string | null;
+    /** 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.
+     */
+    service?: MediaUploadOptions['service'];
+    /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
+    serviceBody?: Record<string, unknown> | null;
     /** Show "Select existing", which opens the library picker. */
     picker?: boolean;
     /** Replaces the built-in picker, e.g. with the host's own dialog. */
@@ -33,17 +43,17 @@ type __VLS_ModelProps = {
 };
 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) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onUploaded?: ((assetId: string) => any) | undefined;
+    onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
 }>, {
-    disabled: boolean;
-    visibility: "private" | "public" | "restricted";
+    visibility: "private" | "restricted" | "public";
     label: string;
+    disabled: boolean;
     accept: readonly string[] | string;
     maxSize: number | null;
     required: boolean;
@@ -54,6 +64,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         enableTranscription?: boolean;
     };
     collectionName: string | null;
+    profile: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    serviceBody: Record<string, unknown> | null;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

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

@@ -15,6 +15,9 @@ const props = defineProps({
   visibility: { type: String, required: false, default: void 0 },
   processingConfig: { type: Object, required: false, default: void 0 },
   collectionName: { type: [String, null], required: false, default: null },
+  profile: { 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 },
   onPick: { type: Function, required: false, default: void 0 },
   editor: { type: Boolean, required: false, default: true },
@@ -30,7 +33,10 @@ const field = useMLMediaField(model, {
   visibility: props.visibility,
   processingConfig: props.processingConfig,
   collectionName: props.collectionName,
-  onUploaded: (id) => emit("uploaded", id)
+  profile: props.profile,
+  service: props.service,
+  serviceBody: props.serviceBody,
+  onUploaded: (id, sessionId) => emit("uploaded", id, sessionId)
 });
 const { state, asset, upload, message } = field;
 const helpText = computed(() => {
@@ -65,19 +71,30 @@ const veilPhase = computed(() => {
 });
 const filePicker = useMLFilePicker();
 const canPick = computed(() => !!props.onPick || props.picker);
+const uploadOptions = computed(() => ({
+  visibility: props.visibility,
+  processingConfig: props.processingConfig,
+  collectionName: props.collectionName,
+  profile: props.profile,
+  service: props.service,
+  serviceBody: props.serviceBody
+}));
 async function pickExisting() {
   if (props.onPick) return props.onPick();
+  const sessions = /* @__PURE__ */ new Map();
   const ids = await filePicker.open({
     accept: props.accept,
     max: 1,
     selected: [model.value],
     title: props.label ? `Select ${props.label.toLowerCase()}` : "Select file",
     maxSize: props.maxSize,
-    upload: { visibility: props.visibility, processingConfig: props.processingConfig, collectionName: props.collectionName }
+    upload: uploadOptions.value,
+    onUploaded: (id, sessionId) => sessions.set(id, sessionId)
   });
   if (ids) {
     field.clearMessage();
     model.value = ids[0] ?? null;
+    if (model.value && sessions.has(model.value)) emit("uploaded", model.value, sessions.get(model.value) ?? null);
   }
 }
 const mediaEditor = useMLMediaEditor();

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

@@ -15,6 +15,16 @@ type __VLS_Props = {
     visibility?: MediaUploadOptions['visibility'];
     processingConfig?: MediaUploadOptions['processingConfig'];
     collectionName?: string | null;
+    /** 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.
+     */
+    service?: MediaUploadOptions['service'];
+    /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
+    serviceBody?: Record<string, unknown> | null;
     /** Show "Select existing", which opens the library picker. */
     picker?: boolean;
     /** Replaces the built-in picker, e.g. with the host's own dialog. */
@@ -33,17 +43,17 @@ type __VLS_ModelProps = {
 };
 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) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onUploaded?: ((assetId: string) => any) | undefined;
+    onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
 }>, {
-    disabled: boolean;
-    visibility: "private" | "public" | "restricted";
+    visibility: "private" | "restricted" | "public";
     label: string;
+    disabled: boolean;
     accept: readonly string[] | string;
     maxSize: number | null;
     required: boolean;
@@ -54,6 +64,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         enableTranscription?: boolean;
     };
     collectionName: string | null;
+    profile: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    serviceBody: Record<string, unknown> | null;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     title?: string;
     maxSize?: number | null;
     upload?: MediaUploadOptions;
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (ids: string[] | null) => any;
@@ -18,6 +19,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     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;
 export default _default;

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

@@ -5,7 +5,8 @@ defineProps({
   selected: { type: Array, required: false, default: () => [] },
   title: { type: String, required: false, default: "Select file" },
   maxSize: { type: [Number, null], required: false, default: null },
-  upload: { type: Object, required: false, default: () => ({}) }
+  upload: { type: Object, required: false, default: () => ({}) },
+  onUploaded: { type: Function, required: false, default: void 0 }
 });
 const emit = defineEmits(["close"]);
 </script>
@@ -25,6 +26,7 @@ const emit = defineEmits(["close"]);
         :selected="selected"
         :max-size="maxSize"
         :upload="upload"
+        :on-uploaded="onUploaded"
         @done="(ids) => emit('close', ids)"
         @cancel="emit('close', null)"
       />

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     title?: string;
     maxSize?: number | null;
     upload?: MediaUploadOptions;
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (ids: string[] | null) => any;
@@ -18,6 +19,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     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;
 export default _default;

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

@@ -11,6 +11,8 @@ type __VLS_Props = {
     maxSize?: number | null;
     /** Upload session settings for files dropped into the picker. */
     upload?: MediaUploadOptions;
+    /** A file uploaded from the picker exists in the library (with its upload session). */
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
     /** Grid rows for a fixed-height body; the list scrolls inside it. */
     bodyClass?: string;
 };
@@ -27,6 +29,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     selected: readonly string[];
     maxSize: number | null;
     upload: MediaUploadOptions;
+    onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -15,6 +15,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   maxSize: { type: [Number, null], required: false, default: null },
   upload: { type: Object, required: false, default: () => ({}) },
+  onUploaded: { type: Function, required: false, default: void 0 },
   bodyClass: { type: String, required: false, default: "max-h-[min(60vh,560px)]" }
 });
 const emit = defineEmits(["done", "cancel"]);
@@ -69,7 +70,11 @@ function onFiles(files) {
   rejectNote.value = null;
   for (const file of files) {
     const u = uploader.start(file);
-    void u.created.then((id) => id && !isChosen(id) && choose(id));
+    void u.created.then((id) => {
+      if (!id) return;
+      props.onUploaded?.(id, u.sessionId);
+      if (!isChosen(id)) choose(id);
+    });
   }
 }
 function onRejected(rejected) {

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

@@ -11,6 +11,8 @@ type __VLS_Props = {
     maxSize?: number | null;
     /** Upload session settings for files dropped into the picker. */
     upload?: MediaUploadOptions;
+    /** A file uploaded from the picker exists in the library (with its upload session). */
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
     /** Grid rows for a fixed-height body; the list scrolls inside it. */
     bodyClass?: string;
 };
@@ -27,6 +29,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     selected: readonly string[];
     maxSize: number | null;
     upload: MediaUploadOptions;
+    onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -30,6 +30,14 @@ type __VLS_Props = {
     collectionName?: string | null;
     /** 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.
+     */
+    service?: MediaUploadOptions['service'];
+    /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
+    serviceBody?: Record<string, unknown> | null;
     picker?: boolean;
     onPick?: () => void;
     editor?: boolean;
@@ -41,20 +49,19 @@ type __VLS_ModelProps = {
 };
 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) => any;
+    uploaded: (assetId: string, role: string, sessionId: string | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onUploaded?: ((assetId: string, role: string) => any) | undefined;
+    onUploaded?: ((assetId: string, role: string, sessionId: string | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
-    disabled: boolean;
+    visibility: "private" | "restricted" | "public";
     title: string;
-    visibility: "private" | "public" | "restricted";
-    profile: string | null;
+    disabled: boolean;
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
@@ -64,6 +71,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         enableTranscription?: boolean;
     };
     collectionName: string | null;
+    profile: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    serviceBody: Record<string, unknown> | null;
     hint: string;
     picker: boolean;
     onPick: () => void;