nuxt-media-library 0.0.48 → 0.0.50

package/README.md

@@ -153,6 +153,51 @@ addMediaGrants(lesson.mediaGrant, profile.mediaGrant) // "mlg_…" or { grant, e
   grants are added.
 - Grants live in the browser only, never in server-side state.
 
+### Uploads started by your backend services
+
+When a backend service starts the upload (the Python client's
+`create_upload_router`), the service creates the session and returns a grant
+for it, and `useMLServiceUpload` sends the parts. Where the parts go is the
+app's decision, not the service's:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  mediaLibrary: {
+    baseURL: process.env.MEDIA_LIBRARY_URL,      // server side, 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' },
+  },
+})
+```
+
+```ts
+const { upload, progress } = useMLServiceUpload()
+const { sessionId, assetId } = await upload(file, {
+  start: '/api/videos/uploads',
+  body: { profile: 'lesson-video', context: { lessonId } },
+})
+await $fetch(`/api/videos/lessons/${lessonId}/video`, { method: 'PUT', body: { sessionId, assetId } })
+```
+
+- The upload base is, in order: `upload(file, { baseURL })`,
+  `useMLServiceUpload({ baseURL })`, `serviceUploads.baseURL`
+  (`NUXT_PUBLIC_MEDIA_LIBRARY_SERVICE_UPLOAD_BASE_URL`), the pass-through
+  route when `serviceUploads.proxy` is on, and last the `uploadBaseUrl` an
+  older service returns. With none, `upload` fails before any part is sent.
+- The pass-through route (`serviceUploads.proxy: true`) forwards only a
+  session's `GET`, parts `PUT`, `finalize` and `abort` to the private
+  `mediaLibrary.baseURL`. It requires the browser's `Bearer mlg_…` grant and
+  forwards it and `X-Tenant` untouched (the static `X-Tenant` when the
+  browser sends none). It never adds the service token, static auth headers
+  or a Nuxt-issued grant, drops cookies, and streams request bodies. Mount it
+  yourself with `createMLServiceUploadsProxy()` from
+  `nuxt-media-library/server` for another path.
+- Don't send these uploads through `createMLCatchAllProxy` with `authorize`:
+  grant mode replaces the browser's grant with its own, and the service's
+  `claim_upload` rejects the session.
+
 ### Vue installation (non-Nuxt)
 
 ```bash

package/dist/module.d.mts

@@ -24,8 +24,21 @@ interface ModuleOptions {
         final?: boolean;
     };
     headers?: Record<string, string> | (() => Record<string, string>);
+    /**
+     * Uploads started by the app's backend services (`useMLServiceUpload`).
+     * `proxy: true` adds `/api/media-library/service-uploads/**`, a same-origin
+     * pass-through that forwards the browser's media grant and nothing else.
+     * `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.
+     */
+    serviceUploads?: {
+        proxy?: boolean;
+        baseURL?: string;
+    };
 }
+declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { _default as default };
+export { SERVICE_UPLOADS_ROUTE, _default as default };
 export type { ChunkUploaderRoutesConfig, ModuleOptions };

package/dist/module.d.ts

@@ -24,8 +24,21 @@ interface ModuleOptions {
         final?: boolean;
     };
     headers?: Record<string, string> | (() => Record<string, string>);
+    /**
+     * Uploads started by the app's backend services (`useMLServiceUpload`).
+     * `proxy: true` adds `/api/media-library/service-uploads/**`, a same-origin
+     * pass-through that forwards the browser's media grant and nothing else.
+     * `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.
+     */
+    serviceUploads?: {
+        proxy?: boolean;
+        baseURL?: string;
+    };
 }
+declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { _default as default };
+export { SERVICE_UPLOADS_ROUTE, _default as default };
 export type { ChunkUploaderRoutesConfig, ModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -4,6 +4,7 @@ export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
 export * from '../dist/runtime/types/asset.js';
 
+const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 const module$1 = defineNuxtModule({
   meta: {
     name: "media-library",
@@ -89,6 +90,12 @@ const module$1 = defineNuxtModule({
       route: "/api/media-library/manage/processing/**",
       handler: resolver.resolve("./runtime/server/processing-proxy")
     });
+    if (options.serviceUploads?.proxy) {
+      addServerHandler({
+        route: `${SERVICE_UPLOADS_ROUTE}/**`,
+        handler: resolver.resolve("./runtime/server/service-uploads-proxy")
+      });
+    }
     nuxt.options.runtimeConfig.mediaLibrary = {
       ...existingPrivate,
       baseURL: existingPrivate.baseURL ?? envBaseURL ?? options.baseURL ?? "",
@@ -110,7 +117,9 @@ 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: existingPublic.headers ?? options.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 : "")
     };
     addPlugin({
       src: resolver.resolve("./runtime/plugins/config")
@@ -118,4 +127,4 @@ const module$1 = defineNuxtModule({
   }
 });
 
-export { module$1 as default };
+export { SERVICE_UPLOADS_ROUTE, module$1 as default };

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

@@ -0,0 +1,60 @@
+import { type RejectedFile } from '../../utils/fileAccept.js';
+type __VLS_Props = {
+    /** Browser accept syntax ("image/*,.glb"). Build one from kinds with acceptForKinds(). */
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Larger files are rejected with reason "size". */
+    maxSize?: number | null;
+    /** How many more files fit. Extra files are rejected with reason "count". */
+    maxFiles?: number | null;
+    disabled?: boolean;
+    /**
+     * `area`: a dashed box with an upload button (fields, picker).
+     * `overlay`: wraps the default slot and only shows a highlight while files are dragged over it (gallery).
+     */
+    variant?: 'area' | 'overlay';
+    title?: string;
+    hint?: string;
+    /** The button that opens the computer's file dialog. Defaults to "Upload file(s)". */
+    buttonLabel?: string;
+    /** One short row instead of a box, for places where the drop zone is secondary (the picker). */
+    compact?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        isDragging: boolean;
+        open: () => void;
+    }) => unknown;
+    actions?: (props: {
+        open: () => void;
+    }) => unknown;
+};
+declare function open(): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    files: (files: File[]) => any;
+    rejected: (files: RejectedFile[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFiles?: ((files: File[]) => any) | undefined;
+    onRejected?: ((files: RejectedFile[]) => any) | undefined;
+}>, {
+    variant: "area" | "overlay";
+    compact: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    title: string;
+    accept: string;
+    maxSize: number | null;
+    maxFiles: number | null;
+    hint: string;
+    buttonLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,137 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useFileUpload } from "#imports";
+import { formatBytes } from "../../utils/assetFormat";
+import { partitionFiles } from "../../utils/fileAccept";
+const props = defineProps({
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: true },
+  maxSize: { type: [Number, null], required: false, default: null },
+  maxFiles: { type: [Number, null], required: false, default: null },
+  disabled: { type: Boolean, required: false, default: false },
+  variant: { type: String, required: false, default: "area" },
+  title: { type: String, required: false, default: void 0 },
+  hint: { type: String, required: false, default: void 0 },
+  buttonLabel: { type: String, required: false, default: void 0 },
+  compact: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["files", "rejected"]);
+defineSlots();
+const { isDragging, dropzoneRef } = useFileUpload({
+  accept: "*",
+  multiple: true,
+  dropzone: true,
+  onUpdate: (files) => handle(files)
+});
+const input = ref();
+function handle(files) {
+  if (props.disabled || !files.length) return;
+  const max = props.multiple ? props.maxFiles : Math.min(1, props.maxFiles ?? 1);
+  const { accepted, rejected } = partitionFiles(files, { accept: props.accept, maxSize: props.maxSize, maxFiles: max });
+  if (accepted.length) emit("files", accepted);
+  if (rejected.length) emit("rejected", rejected);
+}
+function open() {
+  if (!props.disabled) input.value?.click();
+}
+function onInput(e) {
+  const el = e.target;
+  handle(Array.from(el.files ?? []));
+  el.value = "";
+}
+const carriesFiles = ref(false);
+function onDragEnter(e) {
+  carriesFiles.value = !!e.dataTransfer && Array.from(e.dataTransfer.types).includes("Files");
+}
+const active = computed(() => isDragging.value && carriesFiles.value && !props.disabled);
+const sizeHint = computed(() => props.maxSize ? `Up to ${formatBytes(props.maxSize)}` : "");
+defineExpose({ open });
+</script>
+
+<template>
+  <div
+    ref="dropzoneRef"
+    class="relative"
+    @dragenter.capture="onDragEnter"
+    :data-dragging="active || void 0"
+    :aria-disabled="disabled || void 0"
+  >
+    <input
+      ref="input"
+      type="file"
+      class="sr-only"
+      tabindex="-1"
+      aria-hidden="true"
+      :accept="accept === '*' ? void 0 : accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onInput"
+    >
+
+    <template v-if="variant === 'overlay'">
+      <slot
+        :is-dragging="active"
+        :open="open"
+      />
+      <div
+        v-if="active"
+        class="pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-[inherit] border-2 border-dashed border-primary bg-primary/10 backdrop-blur-[1px]"
+      >
+        <span class="flex items-center gap-2 rounded-md bg-default px-3 py-1.5 text-sm font-semibold text-primary shadow-sm">
+          <UIcon
+            name="i-lucide-upload"
+            class="size-4"
+          />
+          {{ title ?? "Drop to upload" }}
+        </span>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="flex items-center rounded-lg border-[1.5px] border-dashed text-center transition-colors motion-reduce:transition-none"
+      :class="[
+  compact ? 'flex-row flex-wrap justify-center gap-x-3 gap-y-1.5 px-3 py-2.5' : 'flex-col gap-2.5 px-4 py-5',
+  active ? 'border-primary bg-primary/10' : 'border-accented bg-default',
+  disabled ? 'opacity-60' : ''
+]"
+    >
+      <slot
+        :is-dragging="active"
+        :open="open"
+      >
+        <UIcon
+          v-if="!compact"
+          name="i-lucide-upload"
+          class="size-5"
+          :class="active ? 'text-primary' : 'text-dimmed'"
+        />
+        <p class="text-sm">
+          <span :class="compact ? 'text-muted' : 'font-semibold'">{{ title ?? (multiple ? "Drop files here" : "Drop a file here") }}</span>
+          <span class="text-muted"> or</span>
+        </p>
+        <div class="flex flex-wrap justify-center gap-1.5">
+          <UButton
+            size="sm"
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-upload"
+            :label="buttonLabel ?? (multiple ? 'Upload files' : 'Upload file')"
+            :disabled="disabled"
+            @click="open"
+          />
+          <slot
+            name="actions"
+            :open="open"
+          />
+        </div>
+        <p
+          v-if="hint || sizeHint"
+          class="text-xs text-dimmed"
+        >
+          {{ [hint, sizeHint].filter(Boolean).join(" \xB7 ") }}
+        </p>
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,60 @@
+import { type RejectedFile } from '../../utils/fileAccept.js';
+type __VLS_Props = {
+    /** Browser accept syntax ("image/*,.glb"). Build one from kinds with acceptForKinds(). */
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Larger files are rejected with reason "size". */
+    maxSize?: number | null;
+    /** How many more files fit. Extra files are rejected with reason "count". */
+    maxFiles?: number | null;
+    disabled?: boolean;
+    /**
+     * `area`: a dashed box with an upload button (fields, picker).
+     * `overlay`: wraps the default slot and only shows a highlight while files are dragged over it (gallery).
+     */
+    variant?: 'area' | 'overlay';
+    title?: string;
+    hint?: string;
+    /** The button that opens the computer's file dialog. Defaults to "Upload file(s)". */
+    buttonLabel?: string;
+    /** One short row instead of a box, for places where the drop zone is secondary (the picker). */
+    compact?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        isDragging: boolean;
+        open: () => void;
+    }) => unknown;
+    actions?: (props: {
+        open: () => void;
+    }) => unknown;
+};
+declare function open(): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    files: (files: File[]) => any;
+    rejected: (files: RejectedFile[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFiles?: ((files: File[]) => any) | undefined;
+    onRejected?: ((files: RejectedFile[]) => any) | undefined;
+}>, {
+    variant: "area" | "overlay";
+    compact: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    title: string;
+    accept: string;
+    maxSize: number | null;
+    maxFiles: number | null;
+    hint: string;
+    buttonLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+import type { MediaUsage } from './UsageList.vue.js';
+export type MediaEditorResult = {
+    action: 'save';
+    alt: Record<string, string>;
+} | {
+    action: 'remove';
+    assetId: string;
+};
+type __VLS_Props = {
+    assetId: string;
+    siblings?: readonly string[];
+    alt?: Readonly<Record<string, string>>;
+    readonly?: boolean;
+    removeLabel?: string;
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result: MediaEditorResult | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result: MediaEditorResult | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  assetId: { type: String, required: true },
+  siblings: { type: Array, required: false },
+  alt: { type: Object, required: false },
+  readonly: { type: Boolean, required: false },
+  removeLabel: { type: String, required: false },
+  usages: { type: Object, required: false }
+});
+const emit = defineEmits(["close"]);
+</script>
+
+<template>
+  <UModal
+    :title="readonly ? 'Preview' : 'Edit media'"
+    :close="{ onClick: () => emit('close', null) }"
+    :ui="{ content: 'sm:max-w-5xl', body: 'p-0 sm:p-0' }"
+    @update:open="(open) => !open && emit('close', null)"
+  >
+    <template #body>
+      <MLMediaEditorPanel
+        :asset-id="assetId"
+        :siblings="siblings"
+        :alt="alt"
+        :readonly="readonly"
+        :remove-label="removeLabel"
+        :usages="usages"
+        @save="({ alt: a }) => emit('close', { action: 'save', alt: a })"
+        @remove="(id) => emit('close', { action: 'remove', assetId: id })"
+        @cancel="emit('close', null)"
+      />
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,23 @@
+import type { MediaUsage } from './UsageList.vue.js';
+export type MediaEditorResult = {
+    action: 'save';
+    alt: Record<string, string>;
+} | {
+    action: 'remove';
+    assetId: string;
+};
+type __VLS_Props = {
+    assetId: string;
+    siblings?: readonly string[];
+    alt?: Readonly<Record<string, string>>;
+    readonly?: boolean;
+    removeLabel?: string;
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result: MediaEditorResult | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result: MediaEditorResult | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+import type { MediaUsage } from './UsageList.vue.js';
+type __VLS_Props = {
+    /** The file to show first. */
+    assetId: string;
+    /** The record's other files, in order. Enables previous / next. */
+    siblings?: readonly string[];
+    /** Current alt text per asset ID. Alt text lives on the host record, not the file. */
+    alt?: Readonly<Record<string, string>>;
+    /** Preview only: no alt editing, no Save. Used from the picker. */
+    readonly?: boolean;
+    /** Label for the remove button, e.g. "Remove from product". Empty hides it. */
+    removeLabel?: string;
+    /** Where each file is used, per asset ID. Omit to hide the section. */
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    currentId: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (assetId: string) => any;
+    cancel: () => any;
+    save: (result: {
+        alt: Record<string, string>;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((assetId: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: ((result: {
+        alt: Record<string, string>;
+    }) => any) | undefined;
+}>, {
+    usages: Readonly<Record<string, MediaUsage[]>>;
+    siblings: readonly string[];
+    alt: Readonly<Record<string, string>>;
+    readonly: boolean;
+    removeLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;