nuxt-media-library 0.0.51 → 0.0.53

package/README.md

@@ -208,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';
@@ -41,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';
@@ -41,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.51",
+  "version": "0.0.53",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -20,6 +20,23 @@ 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;
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "media-library",
@@ -145,7 +162,9 @@ 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 : "")
+      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/MLAssetManager/Processing.vue

@@ -1,33 +1,12 @@
 <script setup>
 import { computed, ref, onMounted, watch } from "vue";
-import { useMLResourcePolicy } from "../../composables/resourcePolicy/useMLResourcePolicy";
 import { mediaGrantHeaders } from "../../composables/useMLMediaGrants";
 const props = defineProps({
   assetId: { type: String, required: true },
   manager: { type: Object, required: true }
 });
-const resourcePolicy = useMLResourcePolicy();
-const policy = ref(null);
-const policyLoading = ref(false);
 const videoUrl = ref(null);
 const asset = computed(() => props.manager.selectedAsset.value);
-const policyId = computed(
-  () => asset.value?.resourcePolicyId ?? asset.value?.resource_policy_id ?? null
-);
-async function loadPolicy() {
-  if (!policyId.value) {
-    policy.value = null;
-    return;
-  }
-  policyLoading.value = true;
-  try {
-    policy.value = await resourcePolicy.get(policyId.value);
-  } catch {
-    policy.value = null;
-  } finally {
-    policyLoading.value = false;
-  }
-}
 async function resolveVideoUrl() {
   if (!asset.value || asset.value.kind !== "video") {
     videoUrl.value = null;
@@ -43,17 +22,9 @@ async function resolveVideoUrl() {
     videoUrl.value = null;
   }
 }
-onMounted(() => {
-  loadPolicy();
-  resolveVideoUrl();
-});
-watch(policyId, loadPolicy);
+onMounted(resolveVideoUrl);
 watch(() => props.assetId, resolveVideoUrl);
-const showStepper = computed(() => {
-  if (policyLoading.value) return false;
-  if (!policy.value) return !policyId.value;
-  return policy.value.processing_config?.auto_process === false;
-});
+const showStepper = computed(() => asset.value?.status === "uploaded");
 function onComplete() {
   props.manager.refresh(props.assetId);
 }
@@ -64,10 +35,8 @@ function onFailed() {
 
 <template>
   <div>
-    <USkeleton v-if="policyLoading" class="h-40 w-full" />
-
     <MLProcessingStepper
-      v-else-if="showStepper"
+      v-if="showStepper"
       :asset-id="assetId"
       :asset-kind="asset?.kind"
       :download-url="videoUrl"

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;

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

@@ -17,6 +17,8 @@ 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 },
+  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 },
@@ -101,8 +103,8 @@ function onAdd(id, tag) {
   if (union.value.includes(id)) setRole(id, key, true);
   else pendingRole.set(id, key);
 }
-function onUploaded(id) {
-  emit("uploaded", id, uploadedRole.get(id) ?? defaultKey.value);
+function onUploaded(id, sessionId) {
+  emit("uploaded", id, uploadedRole.get(id) ?? defaultKey.value, sessionId);
   uploadedRole.delete(id);
 }
 const badges = (id) => roles.value.filter((r) => sel(r.key).includes(id)).map((r) => r.label);
@@ -171,6 +173,8 @@ function chipCount(key, max) {
     :accept="defaultRole?.accept ?? accept"
     :max-size="defaultRole?.maxSize ?? maxSize"
     :profile="defaultRole?.profile ?? null"
+    :service="service"
+    :service-body="serviceBody"
     :disabled="disabled"
     :featured="featured"
     :record-name="recordName"
@@ -247,10 +251,12 @@ function chipCount(key, max) {
     :processing-config="processingConfig"
     :collection-name="collectionName"
     :profile="profile"
+    :service="service"
+    :service-body="serviceBody"
     :picker="picker"
     :on-pick="onPick"
     :editor="editor"
     :on-open="onOpen"
-    @uploaded="(id) => emit('uploaded', id, '')"
+    @uploaded="(id, sessionId) => emit('uploaded', id, '', sessionId)"
   />
 </template>

package/dist/runtime/components/MLMedia/Gallery.vue.d.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;

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

@@ -26,6 +26,10 @@ type __VLS_Props = {
     onOpen?: (assetId: string) => void;
     /** Upload profile name for new files in this list. */
     profile?: string | null;
+    /** Start uploads at a backend service (name or `{ start }`). See useMLMediaUpload. */
+    service?: MediaUploadOptions['service'];
+    /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
+    serviceBody?: Record<string, unknown> | null;
     /** Overrides the "Remove from …" label. */
     removeLabel?: string;
     /** Labels shown on a tile, e.g. its roles. */
@@ -58,19 +62,18 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     uploadFiles: typeof uploadFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    uploaded: (assetId: string) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, 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[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
 }>, {
+    visibility: "private" | "restricted" | "public";
+    title: string;
     disabled: boolean;
     highlight: ReadonlySet<string> | null;
-    title: string;
-    visibility: "private" | "public" | "restricted";
-    profile: string | null;
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
@@ -81,6 +84,9 @@ declare const __VLS_base: 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;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;

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

@@ -24,6 +24,8 @@ const props = defineProps({
   editor: { type: Boolean, required: false, default: true },
   onOpen: { type: Function, required: false, default: void 0 },
   profile: { type: [String, null], required: false, default: null },
+  service: { type: null, required: false, default: void 0 },
+  serviceBody: { type: [Object, null], required: false, default: null },
   removeLabel: { type: String, required: false, default: void 0 },
   badges: { type: Function, required: false, default: void 0 },
   tileMenu: { type: Function, required: false, default: void 0 },
@@ -41,7 +43,9 @@ const gallery = useMLMediaGallery(model, {
   processingConfig: props.processingConfig,
   collectionName: props.collectionName,
   profile: props.profile,
-  onUploaded: (id) => emit("uploaded", id),
+  service: props.service,
+  serviceBody: props.serviceBody,
+  onUploaded: (id, sessionId) => emit("uploaded", id, sessionId),
   onAdd: (id, tag) => props.onAdd?.(id, tag)
 });
 const { items, message, full, replaces } = gallery;
@@ -109,15 +113,29 @@ const mediaEditor = useMLMediaEditor();
 const canPick = computed(() => !props.disabled && (!!props.onPick || props.picker));
 async function pickExisting() {
   if (props.onPick) return props.onPick();
+  const sessions = /* @__PURE__ */ new Map();
+  const before = new Set(model.value);
   const ids = await filePicker.open({
     accept: props.accept,
     max: gallery.limit.value,
     selected: model.value,
     title: `Select ${props.title.toLowerCase()}`,
     maxSize: props.maxSize,
-    upload: { visibility: props.visibility, processingConfig: props.processingConfig, collectionName: props.collectionName, profile: props.profile }
+    upload: {
+      visibility: props.visibility,
+      processingConfig: props.processingConfig,
+      collectionName: props.collectionName,
+      profile: props.profile,
+      service: props.service,
+      serviceBody: props.serviceBody
+    },
+    onUploaded: (id, sessionId) => sessions.set(id, sessionId)
   });
-  if (ids) gallery.setFromPicker(ids);
+  if (!ids) return;
+  gallery.setFromPicker(ids);
+  for (const id of ids) {
+    if (!before.has(id) && sessions.has(id)) emit("uploaded", id, sessions.get(id) ?? null);
+  }
 }
 function openFor(item) {
   const id = item.id;

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

@@ -26,6 +26,10 @@ type __VLS_Props = {
     onOpen?: (assetId: string) => void;
     /** Upload profile name for new files in this list. */
     profile?: string | null;
+    /** Start uploads at a backend service (name or `{ start }`). See useMLMediaUpload. */
+    service?: MediaUploadOptions['service'];
+    /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
+    serviceBody?: Record<string, unknown> | null;
     /** Overrides the "Remove from …" label. */
     removeLabel?: string;
     /** Labels shown on a tile, e.g. its roles. */
@@ -58,19 +62,18 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     uploadFiles: typeof uploadFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    uploaded: (assetId: string) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, 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[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
 }>, {
+    visibility: "private" | "restricted" | "public";
+    title: string;
     disabled: boolean;
     highlight: ReadonlySet<string> | null;
-    title: string;
-    visibility: "private" | "public" | "restricted";
-    profile: string | null;
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
@@ -81,6 +84,9 @@ declare const __VLS_base: 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;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;

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

@@ -40,11 +40,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
     progress: number | null;
-    disabled: boolean;
-    kind: string | null;
     name: string;
-    phase: ProgressVeilPhase | null;
+    kind: string | null;
+    disabled: boolean;
     selected: boolean;
+    phase: ProgressVeilPhase | null;
     missingAlt: boolean;
     onOpen: () => void;
     duration: number | null;

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

@@ -40,11 +40,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
     progress: number | null;
-    disabled: boolean;
-    kind: string | null;
     name: string;
-    phase: ProgressVeilPhase | null;
+    kind: string | null;
+    disabled: boolean;
     selected: boolean;
+    phase: ProgressVeilPhase | null;
     missingAlt: boolean;
     onOpen: () => void;
     duration: number | null;

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

@@ -24,9 +24,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    disabled: boolean;
-    kind: string | null;
     name: string;
+    kind: string | null;
+    disabled: boolean;
     selected: boolean;
     meta: string;
     disabledReason: string;

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

@@ -24,9 +24,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    disabled: boolean;
-    kind: string | null;
     name: string;
+    kind: string | null;
+    disabled: boolean;
     selected: boolean;
     meta: string;
     disabledReason: string;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: string;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    disabled: boolean;
-    kind: string | null;
     name: string;
+    kind: string | null;
+    disabled: boolean;
     selected: boolean;
     date: string;
     disabledReason: string;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: string;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    disabled: boolean;
-    kind: string | null;
     name: string;
+    kind: string | null;
+    disabled: boolean;
     selected: boolean;
     date: string;
     disabledReason: string;

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

@@ -15,8 +15,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     progress: number | null;
-    compact: boolean;
     label: string;
+    compact: boolean;
     onCancel: () => void;
     onRetry: () => void;
     detail: string;

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

@@ -15,8 +15,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     progress: number | null;
-    compact: boolean;
     label: string;
+    compact: boolean;
     onCancel: () => void;
     onRetry: () => void;
     detail: string;

package/dist/runtime/composables/useMLFilePicker.d.ts

@@ -10,6 +10,8 @@ export interface FilePickerOpenOptions {
     /** Bytes, for uploads from inside the picker. */
     maxSize?: number | null;
     upload?: MediaUploadOptions;
+    /** A file uploaded from inside the picker exists in the library (its upload session too, for `service`). */
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
 }
 /**
  * Opens the library dialog. `open()` resolves with the chosen asset IDs in

package/dist/runtime/composables/useMLMediaField.d.ts

@@ -7,8 +7,12 @@ export interface UseMLMediaFieldOptions extends MediaUploadOptions {
     accept?: MaybeRefOrGetter<readonly string[] | string | null | undefined>;
     /** Bytes. */
     maxSize?: MaybeRefOrGetter<number | null | undefined>;
-    /** Called once the uploaded file exists in the library (before processing finishes). */
-    onUploaded?: (assetId: string) => void;
+    /**
+     * Called once the uploaded file exists in the library (before processing
+     * finishes). `sessionId` is its upload session: with `service`, send both
+     * to the service's attach endpoint.
+     */
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
 }
 /**
  * Logic behind <MLMediaField>: one asset ID, uploads that replace it, and the

package/dist/runtime/composables/useMLMediaField.js

@@ -34,7 +34,7 @@ export function useMLMediaField(model, options = {}) {
     void u.created.then((id) => {
       if (!id || upload.value !== u) return;
       model.value = id;
-      onUploaded?.(id);
+      onUploaded?.(id, u.sessionId);
     });
   }
   watch(() => upload.value?.phase, async (phase) => {

package/dist/runtime/composables/useMLMediaGallery.d.ts

@@ -18,7 +18,11 @@ export interface UseMLMediaGalleryOptions extends MediaUploadOptions {
     max?: MaybeRefOrGetter<number | null | undefined>;
     /** Bytes. */
     maxSize?: MaybeRefOrGetter<number | null | undefined>;
-    onUploaded?: (assetId: string) => void;
+    /**
+     * A new upload joined the list. `sessionId` is its upload session: with
+     * `service`, send both to the service's attach endpoint.
+     */
+    onUploaded?: (assetId: string, sessionId: string | null) => void;
     /**
      * Called with a new upload's asset ID right before it joins the list, with
      * the tag passed to onFiles. Lets a gallery with roles place it.

package/dist/runtime/composables/useMLMediaGallery.js

@@ -43,7 +43,7 @@ export function useMLMediaGallery(model, options = {}) {
         if (replaces.value) {
           onAdd?.(id, opts.tag);
           model.value = [id];
-          onUploaded?.(id);
+          onUploaded?.(id, u.sessionId);
           return;
         }
         if (ids.value.includes(id)) {
@@ -56,7 +56,7 @@ export function useMLMediaGallery(model, options = {}) {
         }
         onAdd?.(id, opts.tag);
         model.value = [...ids.value, id];
-        onUploaded?.(id);
+        onUploaded?.(id, u.sessionId);
       });
     }
   }

package/dist/runtime/composables/useMLMediaUpload.d.ts

@@ -1,4 +1,6 @@
 import type { ChunkUploaderConfig } from '../types/uploader.js';
+import { type ServiceUploadChoice } from '../utils/uploader/serviceBackends.js';
+export type { MediaServiceUpload, ServiceUploadBackend, ServiceUploadChoice } from '../utils/uploader/serviceBackends.js';
 export type MediaUploadPhase = 'uploading' | 'processing' | 'ready' | 'failed' | 'canceled';
 /** What a policy-less upload session takes. See docs/resource-policy/retirement.md. */
 export interface MediaUploadOptions {
@@ -20,6 +22,18 @@ export interface MediaUploadOptions {
     profile?: string | null;
     /** Overrides the uploader config the module provides. */
     chunkUploader?: ChunkUploaderConfig;
+    /**
+     * Start uploads at a backend service (py_client `create_upload_router`)
+     * instead of Nuxt's own upload route: the name of a backend registered
+     * under `mediaLibrary.serviceUploads.backends` (e.g. `'videos'`), or
+     * `{ start, … }`. The service creates the session and its profile decides
+     * kind, visibility and processing, so those options are not used here;
+     * `profile` is sent as the start request's `profile`. The file's parts go
+     * to `mediaLibrary.serviceUploads` (pass-through route or public URL).
+     */
+    service?: ServiceUploadChoice;
+    /** Extra fields for the service's start request, e.g. `{ context: { lessonId } }`. */
+    serviceBody?: Record<string, unknown> | null;
 }
 export interface MediaUpload {
     readonly key: string;
@@ -31,6 +45,11 @@ export interface MediaUpload {
     /** 0–100, or null while a step reports no progress. */
     progress: number | null;
     assetId: string | null;
+    /**
+     * The upload session, once known. With `service`, send it with `assetId`
+     * to the service's attach endpoint (its `claim_upload` needs both).
+     */
+    sessionId: string | null;
     error: string | null;
     cancel: () => void;
     retry: () => void;
@@ -76,6 +95,7 @@ export declare function useMLMediaUpload(defaults?: MediaUploadOptions): {
         phase: MediaUploadPhase;
         progress: number | null;
         assetId: string | null;
+        sessionId: string | null;
         error: string | null;
         cancel: () => void;
         retry: () => void;
@@ -119,6 +139,7 @@ export declare function useMLMediaUpload(defaults?: MediaUploadOptions): {
         phase: MediaUploadPhase;
         progress: number | null;
         assetId: string | null;
+        sessionId: string | null;
         error: string | null;
         cancel: () => void;
         retry: () => void;

package/dist/runtime/composables/useMLMediaUpload.js

@@ -1,6 +1,11 @@
 import { onBeforeUnmount, reactive, ref, watch } from "vue";
 import { $fetch } from "ofetch";
+import { useRuntimeConfig } from "#imports";
 import { ChunkUploader } from "../utils/uploader/uploader.js";
+import { createServiceUpload } from "../utils/uploader/serviceUpload.js";
+import {
+  resolveServiceUpload
+} from "../utils/uploader/serviceBackends.js";
 import { kindForFile } from "../utils/fileAccept.js";
 import { useMLChunkUploader } from "./useMLChunkUploader.js";
 import { useMLProcessingStatus } from "./useMLProcessingStatus.js";
@@ -8,6 +13,9 @@ let seq = 0;
 export function useMLMediaUpload(defaults = {}) {
   const base = useMLChunkUploader(defaults.chunkUploader).config;
   const cfg = base.proxyUploads ? { ...base, baseURL: "" } : base;
+  const publicConfig = useRuntimeConfig().public?.mediaLibrary;
+  const serviceBaseURL = publicConfig?.serviceUploadBaseURL;
+  const serviceBackends = publicConfig?.serviceUploadBackends;
   const { track } = useMLProcessingStatus();
   const uploads = ref([]);
   const cleanups = /* @__PURE__ */ new Map();
@@ -17,6 +25,7 @@ export function useMLMediaUpload(defaults = {}) {
     const isVisual = file.type.startsWith("image/") || file.type.startsWith("video/");
     const localPreview = isVisual && typeof URL !== "undefined" ? URL.createObjectURL(file) : null;
     let uploader = null;
+    let serviceRun = null;
     let stream = null;
     let stopWatch = null;
     let resolveCreated;
@@ -28,6 +37,7 @@ export function useMLMediaUpload(defaults = {}) {
       phase: "uploading",
       progress: 0,
       assetId: null,
+      sessionId: null,
       error: null,
       cancel,
       retry,
@@ -81,11 +91,11 @@ export function useMLMediaUpload(defaults = {}) {
       if (status === "ready") finish("ready");
       else if (status === "failed") finish("failed", "Processing failed");
     }
-    async function run() {
+    const onProgress = (p) => {
+      upload.progress = p.percent;
+    };
+    async function uploadViaNuxt() {
       uploader = new ChunkUploader(cfg);
-      upload.phase = "uploading";
-      upload.progress = 0;
-      upload.error = null;
       const create = {
         kind,
         visibility: opts.visibility,
@@ -93,15 +103,32 @@ export function useMLMediaUpload(defaults = {}) {
         collection_name: opts.collectionName ?? null,
         ...opts.profile ? { profile: opts.profile } : {}
       };
+      const res = await uploader.uploadFile(file, { create, onProgress });
+      const ids = Array.isArray(res?.finalize?.asset_ids) ? res.finalize.asset_ids : res?.finalize?.asset_id ? [res.finalize.asset_id] : [];
+      return { assetId: ids[0] ?? null, sessionId: res?.sessionId ?? null };
+    }
+    async function uploadViaService(service) {
+      serviceRun = createServiceUpload({
+        fetch: (url, o) => $fetch(url, o),
+        createUploader: (c) => new ChunkUploader(c),
+        baseURL: serviceBaseURL || void 0
+      });
+      const res = await serviceRun.upload(file, {
+        ...service,
+        body: { ...opts.profile ? { profile: opts.profile } : {}, ...service.body },
+        onProgress
+      });
+      return { assetId: res.assetId, sessionId: res.sessionId };
+    }
+    async function run() {
+      upload.phase = "uploading";
+      upload.progress = 0;
+      upload.error = null;
+      upload.sessionId = null;
       try {
-        const res = await uploader.uploadFile(file, {
-          create,
-          onProgress: (p) => {
-            upload.progress = p.percent;
-          }
-        });
-        const ids = Array.isArray(res?.finalize?.asset_ids) ? res.finalize.asset_ids : res?.finalize?.asset_id ? [res.finalize.asset_id] : [];
-        const assetId = ids[0] ?? null;
+        const service = resolveServiceUpload(opts.service, serviceBackends, opts.serviceBody);
+        const { assetId, sessionId } = service ? await uploadViaService(service) : await uploadViaNuxt();
+        upload.sessionId = sessionId;
         if (!assetId) {
           finish("failed", "The upload finished but no file was created");
           resolveCreated(null);
@@ -119,6 +146,7 @@ export function useMLMediaUpload(defaults = {}) {
     function cancel() {
       if (upload.phase !== "uploading" && upload.phase !== "processing") return;
       uploader?.abort();
+      serviceRun?.abort();
       finish("canceled");
       if (!upload.assetId) resolveCreated(null);
     }
@@ -132,6 +160,7 @@ export function useMLMediaUpload(defaults = {}) {
     }
     cleanups.set(upload.key, () => {
       uploader?.abort();
+      serviceRun?.abort();
       stopWatch?.();
       stream?.close();
       if (localPreview) URL.revokeObjectURL(localPreview);

package/dist/runtime/utils/uploader/serviceBackends.d.ts

@@ -0,0 +1,26 @@
+import type { ServiceUploadOptions } from './serviceUpload.js';
+/**
+ * A backend service that starts uploads (py_client `create_upload_router`),
+ * as registered under `mediaLibrary.serviceUploads.backends`. Each service's
+ * Nuxt layer registers its own; Nuxt merges them across layers.
+ */
+export interface ServiceUploadBackend {
+    /** The start endpoint the browser calls, e.g. `/api/videos/uploads`. */
+    start: string;
+    /**
+     * The grant refresh endpoint, with a `:sessionId` placeholder, e.g.
+     * `/api/videos/uploads/:sessionId/grant` (that is also the default).
+     */
+    refresh?: string;
+}
+/** How a widget names where its uploads start. */
+export type MediaServiceUpload = Pick<ServiceUploadOptions, 'start' | 'body' | 'refresh' | 'headers' | 'baseURL'>;
+export type ServiceUploadChoice = string | MediaServiceUpload | null | undefined;
+/**
+ * The service upload for a widget's `service` option, or null to upload
+ * through Nuxt's own route. A name is looked up in the registered backends;
+ * `body` (e.g. `{ context }`) is merged into the start request.
+ *
+ * @throws Error for a name no layer registered.
+ */
+export declare function resolveServiceUpload(service: ServiceUploadChoice, backends: Record<string, ServiceUploadBackend | undefined> | null | undefined, body?: Record<string, unknown> | null): MediaServiceUpload | null;

package/dist/runtime/utils/uploader/serviceBackends.js

@@ -0,0 +1,18 @@
+export function resolveServiceUpload(service, backends, body) {
+  if (!service) return null;
+  let target;
+  if (typeof service === "string") {
+    const backend = backends?.[service];
+    if (!backend?.start) {
+      throw new Error(`No upload backend '${service}': add it under mediaLibrary.serviceUploads.backends.`);
+    }
+    const refresh = backend.refresh;
+    target = {
+      start: backend.start,
+      ...refresh ? { refresh: (sessionId) => refresh.replace(/:sessionId\b|\{sessionId\}/g, encodeURIComponent(sessionId)) } : {}
+    };
+  } else {
+    target = service;
+  }
+  return body ? { ...target, body: { ...target.body, ...body } } : target;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-media-library",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "Nuxt module for media library management — chunked uploads, asset previews, and resource policies",
   "repository": {
     "type": "git",