nuxt-media-library 0.0.58 → 0.0.60

package/README.md

@@ -294,6 +294,64 @@ export default defineNuxtConfig({
 - There is no default backend: each layer's widgets name theirs. The module
   only stores the paths; each layer's own routes reach its service.
 
+### File meta from the widgets
+
+`MLMediaField` and `MLMediaGallery` report what they know about their files:
+name, extension, MIME type, kind, size, duration, width, height and pages.
+
+```vue
+<MLMediaField v-model="lesson.videoId" v-model:meta="videoMeta" @meta="m => console.log(m?.durationSeconds)" />
+
+<MLMediaGallery v-model="post.mediaIds" v-model:meta="mediaMeta" @meta="(assetId, m) => …" />
+```
+
+- `v-model:meta` is output only: `MediaFileMeta | null` on the field, a map
+  by asset ID on the gallery (every role). `@meta` fires per file that
+  changed, with null when it left.
+- A file uploaded in this tab is read in the browser right away
+  (`source: 'local'`, duration and size from a hidden video, audio or image
+  element). The media library's data replaces it once loaded
+  (`source: 'server'`); values it has no rendition for yet stay local.
+- A file needs an asset ID before it has meta: during the byte upload it
+  has none yet.
+- `useMLMediaMeta(ids, getAsset)` gives the same map for your own lists.
+
+### Error messages, in the editor's language
+
+When a backend refuses a request it answers `{ detail, reason }`: `reason`
+is a stable code (py_client `UploadRejected`: `too_large`, `mime_type`,
+`context_mismatch`, …), `detail` English text. The widgets show, first that
+applies:
+
+1. the text for a known `reason`, in the editor's language;
+2. `detail` (a 422's first `msg`);
+3. the backend's inner `message`, then the status text;
+4. the place's own fallback ("Upload failed", "Could not add the file", …).
+
+The body is read whether the module's own proxy streamed it (`err.data`) or
+an app proxy rethrew it with h3 `createError({ data })` (`err.data.data`).
+The raw "[POST] url: 400" text is never shown.
+
+The language is the app's `@nuxtjs/i18n` locale, else `mediaLibrary.locale`;
+its language part picks the texts (`ar-SA` → `ar`). Built in: `en` and `ar`.
+An app can change any text, or add a language:
+
+```ts
+mediaLibrary: {
+  locale: 'ar',                      // without @nuxtjs/i18n
+  errorTexts: {
+    ar: {
+      reasons: { too_large: 'حجم هذا الملف أكبر من المسموح.' },
+      fallbacks: { upload: 'فشل رفع الملف' },
+    },
+  },
+},
+```
+
+A reason with no text in the editor's language uses the English one, then
+`detail`. `mediaErrorMessage(err, fallback, { locale, texts })` and
+`mlErrorMessage(err, fallback)` are exported for your own pages.
+
 ### Vue installation (non-Nuxt)
 
 ```bash

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
 import { MediaBackends } from '../dist/runtime/utils/backends.js';
+import { MediaErrorTextsByLocale } from '../dist/runtime/utils/errorMessage.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -72,6 +73,17 @@ interface ModuleOptions {
      * its routes.
      */
     backends?: MediaBackends;
+    /**
+     * Language of the widgets' error texts when the app has no i18n locale
+     * (with @nuxtjs/i18n its active locale wins). Built in: `en`, `ar`.
+     */
+    locale?: string;
+    /**
+     * The app's error texts over the built-in ones, by language:
+     * `{ ar: { reasons: { too_large: '…' }, fallbacks: { upload: '…' } } }`.
+     * `reasons` are backend reason codes (py_client `UploadRejected`).
+     */
+    errorTexts?: MediaErrorTextsByLocale;
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.d.ts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
 import { MediaBackends } from '../dist/runtime/utils/backends.js';
+import { MediaErrorTextsByLocale } from '../dist/runtime/utils/errorMessage.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -72,6 +73,17 @@ interface ModuleOptions {
      * its routes.
      */
     backends?: MediaBackends;
+    /**
+     * Language of the widgets' error texts when the app has no i18n locale
+     * (with @nuxtjs/i18n its active locale wins). Built in: `en`, `ar`.
+     */
+    locale?: string;
+    /**
+     * The app's error texts over the built-in ones, by language:
+     * `{ ar: { reasons: { too_large: '…' }, fallbacks: { upload: '…' } } }`.
+     * `reasons` are backend reason codes (py_client `UploadRejected`).
+     */
+    errorTexts?: MediaErrorTextsByLocale;
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

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

package/dist/module.mjs

@@ -177,6 +177,9 @@ const module$1 = defineNuxtModule({
       // The backend registry (NUXT_PUBLIC_MEDIA_LIBRARY_BACKENDS): names widgets pass as `backend`.
       backends,
       // Older form, kept for code that reads it: each backend's upload routes.
+      // NUXT_PUBLIC_MEDIA_LIBRARY_LOCALE; the app's i18n locale wins at runtime.
+      locale: existingPublic.locale || options.locale || "",
+      errorTexts: { ...options.errorTexts, ...existingPublic.errorTexts },
       serviceUploadBackends: Object.fromEntries(
         Object.entries(backends).flatMap(([name, b]) => b.upload ? [[name, b.upload]] : [])
       )

package/dist/runtime/components/MLAssetManager/AssetOverview.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
 import { useMLResourcePolicy, Visibility } from "../../index";
+import { mlErrorMessage } from "../../utils/errorMessage";
 const props = defineProps({
   asset: { type: Object, required: true },
   manager: { type: Object, required: false }
@@ -71,7 +72,7 @@ async function changeVisibility(next) {
   try {
     await props.manager.updateAsset(props.asset.id, { visibility: next });
   } catch (err) {
-    visibilityError.value = err instanceof Error ? err.message : "Failed to update visibility";
+    visibilityError.value = mlErrorMessage(err, "updateVisibility");
   } finally {
     visibilityUpdating.value = false;
   }
@@ -138,7 +139,7 @@ async function loadPolicy() {
   try {
     policy.value = await policyApi.get(id);
   } catch (err) {
-    policyError.value = err instanceof Error ? err.message : "Failed to load policy";
+    policyError.value = mlErrorMessage(err, "loadPolicy");
     policy.value = null;
   } finally {
     policyLoading.value = false;

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

@@ -1,3 +1,4 @@
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
@@ -42,34 +43,43 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
     /** Alt text for the file, stored on the host record. Edited in the media editor. */
     'alt'?: string | undefined;
+    /**
+     * The file's meta (name, extension, MIME type, kind, size, duration,
+     * dimensions), or null when empty. Output only: the field writes it.
+     */
+    'meta'?: MediaFileMeta | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
+    "update:meta": (value: MediaFileMeta | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
-    label: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    maxSize: number | null;
-    required: boolean;
-    removeLabel: string;
+    label: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    required: boolean;
+    removeLabel: string;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

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

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

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

@@ -1,3 +1,4 @@
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
@@ -42,34 +43,43 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
     /** Alt text for the file, stored on the host record. Edited in the media editor. */
     'alt'?: string | undefined;
+    /**
+     * The file's meta (name, extension, MIME type, kind, size, duration,
+     * dimensions), or null when empty. Output only: the field writes it.
+     */
+    'meta'?: MediaFileMeta | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
+    "update:meta": (value: MediaFileMeta | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
-    label: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    maxSize: number | null;
-    required: boolean;
-    removeLabel: string;
+    label: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    required: boolean;
+    removeLabel: string;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 export interface MediaGalleryRole {
     /** Shown on chips, badges and menus, e.g. "Cover". */
     label: string;
@@ -52,35 +53,44 @@ type __VLS_Props = {
 type __VLS_ModelProps = {
     modelValue?: string[];
     'alt'?: Record<string, string> | undefined;
+    /**
+     * Meta of every file in the gallery (all roles), by asset ID: name,
+     * extension, MIME type, kind, size, duration, dimensions. Output only.
+     */
+    'meta'?: Record<string, MediaFileMeta>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, role: string, sessionId: string | null) => any;
+    meta: (assetId: string, meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    "update:meta": (value: Record<string, MediaFileMeta>) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, role: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((assetId: string, meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
 import { $fetch } from "ofetch";
+import { watchMediaMeta } from "../../composables/useMLMediaMeta";
 import { kindForFile } from "../../utils/fileAccept";
 import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
 import GallerySection from "./GallerySection.vue";
@@ -29,7 +30,12 @@ const props = defineProps({
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded", "update:profiles"]);
+const meta = defineModel("meta", { type: Object, ...{ default: () => ({}) } });
+const emit = defineEmits(["uploaded", "update:profiles", "meta"]);
+const sectionMeta = ref({});
+watchMediaMeta(computed(() => sectionMeta.value), (all) => {
+  meta.value = all;
+}, (id, m) => emit("meta", id, m));
 const roles = computed(() => Object.entries(props.profiles ?? {}).map(([key, r]) => ({ key, ...r })));
 const hasRoles = computed(() => roles.value.length > 0);
 const single = (r) => r.max === 1;
@@ -296,6 +302,7 @@ function chipCount(key, max) {
     :on-add="onAdd"
     @update:model-value="onUnionUpdate"
     @uploaded="onUploaded"
+    @meta="(m) => sectionMeta = m"
   >
     <template #toolbar>
       <div class="flex flex-col gap-1.5">
@@ -363,5 +370,6 @@ function chipCount(key, max) {
     :editor="editor"
     :on-open="onOpen"
     @uploaded="(id, sessionId) => emit('uploaded', id, '', sessionId)"
+    @meta="(m) => sectionMeta = m"
   />
 </template>

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

@@ -1,4 +1,5 @@
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 export interface MediaGalleryRole {
     /** Shown on chips, badges and menus, e.g. "Cover". */
     label: string;
@@ -52,35 +53,44 @@ type __VLS_Props = {
 type __VLS_ModelProps = {
     modelValue?: string[];
     'alt'?: Record<string, string> | undefined;
+    /**
+     * Meta of every file in the gallery (all roles), by asset ID: name,
+     * extension, MIME type, kind, size, duration, dimensions. Output only.
+     */
+    'meta'?: Record<string, MediaFileMeta>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, role: string, sessionId: string | null) => any;
+    meta: (assetId: string, meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    "update:meta": (value: Record<string, MediaFileMeta>) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, role: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((assetId: string, meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

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

@@ -1,5 +1,6 @@
 import type { DropdownMenuItem } from '@nuxt/ui';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 type __VLS_Props = {
     /** Asset kinds the list takes. Empty means any file. */
     accept?: readonly string[] | string;
@@ -69,32 +70,34 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     uploadFiles: typeof uploadFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: Record<string, MediaFileMeta>) => 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, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
     highlight: ReadonlySet<string> | null;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
-    removeLabel: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
+    profileFor: (file: File) => string | null | undefined;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
-    profileFor: (file: File) => string | null | undefined;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
+    removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;

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

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { useMLMediaGallery } from "../../composables/useMLMediaGallery";
 import { useMLFilePicker } from "../../composables/useMLFilePicker";
 import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { useMLMediaMeta } from "../../composables/useMLMediaMeta";
 import { assetName } from "../../utils/assetFormat";
 import { assetThumbnailUrl } from "../../utils/assetThumbnail";
 import { acceptForKinds, partitionFiles } from "../../utils/fileAccept";
@@ -37,7 +38,7 @@ const props = defineProps({
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded"]);
+const emit = defineEmits(["uploaded", "meta"]);
 const gallery = useMLMediaGallery(model, {
   accept: () => props.accept,
   max: () => props.max,
@@ -54,6 +55,11 @@ const gallery = useMLMediaGallery(model, {
   onAdd: (id, tag) => props.onAdd?.(id, tag)
 });
 const { items, message, full, replaces } = gallery;
+const metaById = useMLMediaMeta(model, (id) => gallery.asset(id));
+watch(() => JSON.stringify(metaById.value), (now, before) => {
+  if (before === void 0 && now === "{}") return;
+  emit("meta", metaById.value);
+}, { immediate: true });
 const removeLabel = computed(() => props.removeLabel ?? (props.recordName ? `Remove from ${props.recordName}` : "Remove"));
 const showAddTile = computed(() => !props.disabled && !full.value && !(replaces.value && items.value.length > 0));
 const countLabel = computed(() => {