@antelopejs/dms 0.5.2 → 0.5.4

package/frontend-vue/layers/dms-ui/app/components/form/components/File.vue

@@ -7,6 +7,10 @@ import {
   type FileConstraintViolation,
   type FileFieldConstraints,
 } from "../../../utils/fileConstraints";
+import {
+  isDefinitiveMetadataFailure,
+  resolveMetadataRetryDelay,
+} from "../../../utils/metadataRetry";
 
 export type FileConstraints = FileFieldConstraints;
 
@@ -53,12 +57,13 @@ const selectedFiles = ref<File | File[] | null>(null);
 const uploadingFiles = ref<UploadingFile[]>([]);
 const uploadedKeys = ref<string[]>([]);
 const fileMetadata = ref<Map<string, FileMetadataResponse>>(new Map());
+const unavailableKeys = ref<Set<string>>(new Set());
 const metadataTimers = new Map<string, ReturnType<typeof setTimeout>>();
+const metadataFailures = new Map<string, number>();
 const pendingMetadata = new Map<string, Promise<void>>();
 let isDisposed = false;
 const contentLanguage = inject(FORM_CONTENT_LANGUAGE_KEY, undefined);
 const URL_REFRESH_LEAD_MS = 5000;
-const TRANSIENT_RETRY_MS = 1000;
 
 const initializeFromModelValue = (
   val: string | string[] | null | undefined,
@@ -106,6 +111,33 @@ const fetchMetadata = async (
   await request;
 };
 
+const markUnavailable = (resourceKey: string, error: unknown) => {
+  const cached = fileMetadata.value.get(resourceKey);
+  const isExpired =
+    cached?.expiresAt !== undefined && cached.expiresAt <= Date.now();
+  if (cached && !isExpired && !isDefinitiveMetadataFailure(error)) return;
+  fileMetadata.value.set(resourceKey, {
+    resourceKey,
+    filename: cached?.filename ?? resourceKey,
+    size: cached?.size ?? 0,
+    mimetype: cached?.mimetype ?? "application/octet-stream",
+    url: "",
+  });
+  unavailableKeys.value.add(resourceKey);
+};
+
+const handleMetadataFailure = (resourceKey: string, error: unknown) => {
+  markUnavailable(resourceKey, error);
+  const failures = (metadataFailures.get(resourceKey) ?? 0) + 1;
+  metadataFailures.set(resourceKey, failures);
+  const delay = resolveMetadataRetryDelay(error, failures);
+  if (delay === null || import.meta.env.SSR) return;
+  metadataTimers.set(
+    resourceKey,
+    setTimeout(() => fetchMetadata(resourceKey, true), delay),
+  );
+};
+
 const requestMetadata = async (resourceKey: string): Promise<void> => {
   try {
     const metadata = await $authFetch<FileMetadataResponse>(
@@ -122,27 +154,12 @@ const requestMetadata = async (resourceKey: string): Promise<void> => {
     );
     if (isDisposed || !uploadedKeys.value.includes(resourceKey)) return;
     fileMetadata.value.set(resourceKey, metadata);
+    unavailableKeys.value.delete(resourceKey);
+    metadataFailures.delete(resourceKey);
     scheduleMetadataRefresh(resourceKey, metadata.expiresAt);
-  } catch (_error) {
+  } catch (error) {
     if (isDisposed || !uploadedKeys.value.includes(resourceKey)) return;
-    const cached = fileMetadata.value.get(resourceKey);
-    const isExpired =
-      cached?.expiresAt !== undefined && cached.expiresAt <= Date.now();
-    if (!cached || isExpired) {
-      fileMetadata.value.set(resourceKey, {
-        resourceKey,
-        filename: cached?.filename ?? resourceKey,
-        size: cached?.size ?? 0,
-        mimetype: cached?.mimetype ?? "application/octet-stream",
-        url: "",
-      });
-    }
-    if (!import.meta.env.SSR) {
-      metadataTimers.set(
-        resourceKey,
-        setTimeout(() => fetchMetadata(resourceKey, true), TRANSIENT_RETRY_MS),
-      );
-    }
+    handleMetadataFailure(resourceKey, error);
   } finally {
     pendingMetadata.delete(resourceKey);
   }
@@ -284,6 +301,8 @@ const removeUploadingFile = (id: string) => {
 const removeUploadedFile = (key: string) => {
   uploadedKeys.value = uploadedKeys.value.filter((k) => k !== key);
   fileMetadata.value.delete(key);
+  unavailableKeys.value.delete(key);
+  metadataFailures.delete(key);
   const timer = metadataTimers.get(key);
   if (timer) clearTimeout(timer);
   emitValue();
@@ -293,6 +312,8 @@ const getMetadata = (key: string): FileMetadataResponse | undefined => {
   return fileMetadata.value.get(key);
 };
 
+const isUnavailable = (key: string): boolean => unavailableKeys.value.has(key);
+
 const isImage = (mimetype: string): boolean => {
   return mimetype.startsWith("image/");
 };
@@ -399,6 +420,11 @@ onScopeDispose(() => {
             :alt="getMetadata(key)!.filename"
             class="h-8 w-8 rounded object-cover"
           />
+          <UIcon
+            v-else-if="isUnavailable(key)"
+            name="i-lucide-alert-circle"
+            class="text-error h-4 w-4"
+          />
           <UIcon
             v-else
             name="i-lucide-file-check"
@@ -412,7 +438,10 @@ onScopeDispose(() => {
           >
             {{ getMetadata(key)!.filename }}
           </ULink>
-          <span class="text-muted text-xs">
+          <span v-if="isUnavailable(key)" class="text-error text-xs">
+            {{ $t("dms.form.file.file_unavailable") }}
+          </span>
+          <span v-else class="text-muted text-xs">
             {{ formatFileSize(getMetadata(key)!.size) }}
           </span>
         </template>

package/frontend-vue/layers/dms-ui/app/components/form/components/Image.vue

@@ -10,6 +10,10 @@ import {
   type ImageResizeBounds,
   resizeImageToBounds,
 } from "../../../utils/imageResize";
+import {
+  isDefinitiveMetadataFailure,
+  resolveMetadataRetryDelay,
+} from "../../../utils/metadataRetry";
 
 export type ImageConstraints = FileFieldConstraints;
 
@@ -25,7 +29,11 @@ interface ImageProps {
   disabled?: boolean;
 }
 
-type ItemStatus = "uploading" | "done" | "error";
+/**
+ * `error` is a failed upload of a picked file; `unavailable` is a stored value
+ * whose metadata could not be read (deleted, swept from staging, or denied).
+ */
+type ItemStatus = "uploading" | "done" | "error" | "unavailable";
 
 interface GalleryItem {
   id: string;
@@ -67,7 +75,18 @@ const contentLanguage = inject(FORM_CONTENT_LANGUAGE_KEY, undefined);
 
 const DEFAULT_ACCEPT = "image/*";
 const URL_REFRESH_LEAD_MS = 5000;
-const TRANSIENT_RETRY_MS = 1000;
+const FAILURE_LABEL_KEYS: Partial<Record<ItemStatus, string>> = {
+  error: "dms.form.image.upload_failed",
+  unavailable: "dms.form.image.file_unavailable",
+};
+
+/**
+ * Item ids are random, so they differ between the server render and
+ * hydration; DOM ids derive from `useId()`, which both sides agree on.
+ */
+const fieldId = useId();
+const singleAltInputId = `${fieldId}-alt`;
+const detailAltInputId = `${fieldId}-alt-detail`;
 
 const items = ref<GalleryItem[]>([]);
 const fileInput = ref<HTMLInputElement | null>(null);
@@ -77,6 +96,7 @@ const dragOverItemId = ref<string | null>(null);
 const detailItemId = ref<string | null>(null);
 const detailAltDraft = ref("");
 const metadataTimers = new Map<string, ReturnType<typeof setTimeout>>();
+const metadataFailures = new Map<string, number>();
 const pendingMetadata = new Set<string>();
 let isDisposed = false;
 
@@ -120,6 +140,21 @@ const scheduleItemExpiryRefresh = (item: GalleryItem) => {
   scheduleItemMetadataRefresh(item, remaining - refreshLead);
 };
 
+const handleItemMetadataFailure = (item: GalleryItem, error: unknown) => {
+  if (
+    isDefinitiveMetadataFailure(error) ||
+    !item.url ||
+    (item.expiresAt !== undefined && item.expiresAt <= Date.now())
+  ) {
+    item.url = "";
+    item.status = "unavailable";
+  }
+  const failures = (metadataFailures.get(item.id) ?? 0) + 1;
+  metadataFailures.set(item.id, failures);
+  const delay = resolveMetadataRetryDelay(error, failures);
+  if (delay !== null) scheduleItemMetadataRefresh(item, delay);
+};
+
 const fetchItemMetadata = async (item: GalleryItem, force = false) => {
   if (isDisposed) return;
   if (!item.key || (!force && item.url) || pendingMetadata.has(item.id)) return;
@@ -141,17 +176,11 @@ const fetchItemMetadata = async (item: GalleryItem, force = false) => {
     item.size = metadata.size;
     item.expiresAt = metadata.expiresAt;
     item.status = "done";
+    metadataFailures.delete(item.id);
     scheduleItemExpiryRefresh(item);
-  } catch (_error) {
+  } catch (error) {
     if (isDisposed || !items.value.some(({ id }) => id === item.id)) return;
-    if (
-      !item.url ||
-      (item.expiresAt !== undefined && item.expiresAt <= Date.now())
-    ) {
-      item.url = "";
-      item.status = "error";
-    }
-    scheduleItemMetadataRefresh(item, TRANSIENT_RETRY_MS);
+    handleItemMetadataFailure(item, error);
   } finally {
     pendingMetadata.delete(item.id);
   }
@@ -180,6 +209,7 @@ const releaseItem = (item: GalleryItem) => {
   const timer = metadataTimers.get(item.id);
   if (timer) clearTimeout(timer);
   metadataTimers.delete(item.id);
+  metadataFailures.delete(item.id);
 };
 
 const initializeFromModelValue = () => {
@@ -524,6 +554,9 @@ const formatFileSize = (bytes: number): string => {
   return `${size.toFixed(1)} ${units[unitIndex]}`;
 };
 
+const failureLabelKey = (item: GalleryItem): string | undefined =>
+  FAILURE_LABEL_KEYS[item.status];
+
 const itemMeta = (item: GalleryItem): string => {
   const parts: string[] = [];
   if (item.width && item.height) parts.push(`${item.width}×${item.height}`);
@@ -650,13 +683,13 @@ onBeforeUnmount(() => {
           </div>
 
           <div
-            v-else-if="item.status === 'error'"
+            v-else-if="failureLabelKey(item)"
             class="bg-error/15 absolute inset-0 z-[5] flex flex-col items-center justify-center gap-2 p-2 text-center backdrop-blur-[1px]"
           >
             <span
               class="bg-error rounded-md px-2 py-0.5 text-[11px] font-semibold text-white"
             >
-              {{ t("dms.form.image.upload_failed") }}
+              {{ t(failureLabelKey(item)!) }}
             </span>
             <UButton
               v-if="item.file"
@@ -794,13 +827,13 @@ onBeforeUnmount(() => {
           </div>
 
           <div
-            v-else-if="singleItem.status === 'error'"
+            v-else-if="failureLabelKey(singleItem)"
             class="bg-error/15 absolute inset-0 z-[5] flex flex-col items-center justify-center gap-2 p-2 text-center backdrop-blur-[1px]"
           >
             <span
               class="bg-error rounded-md px-2 py-0.5 text-[11px] font-semibold text-white"
             >
-              {{ t("dms.form.image.upload_failed") }}
+              {{ t(failureLabelKey(singleItem)!) }}
             </span>
             <UButton
               v-if="singleItem.file"
@@ -835,21 +868,21 @@ onBeforeUnmount(() => {
                 t("dms.form.image.uploading", { progress: singleItem.progress })
               }}
             </template>
-            <template v-else-if="singleItem.status === 'error'">
-              {{ t("dms.form.image.upload_failed") }}
+            <template v-else-if="failureLabelKey(singleItem)">
+              {{ t(failureLabelKey(singleItem)!) }}
             </template>
             <template v-else>{{ itemMeta(singleItem) }}</template>
           </div>
 
           <div class="mt-3">
             <label
-              :for="`${singleItem.id}-alt`"
+              :for="singleAltInputId"
               class="text-muted mb-1.5 block text-xs font-semibold"
             >
               {{ t("dms.form.image.alt_label") }}
             </label>
             <UInput
-              :id="`${singleItem.id}-alt`"
+              :id="singleAltInputId"
               v-model="singleItem.alt"
               :placeholder="t('dms.form.image.alt_placeholder')"
               :disabled="disabled || singleItem.status !== 'done'"
@@ -903,13 +936,13 @@ onBeforeUnmount(() => {
 
           <div class="flex flex-col gap-2 p-4">
             <label
-              :for="`${detailItem.id}-alt-detail`"
+              :for="detailAltInputId"
               class="text-muted text-xs font-semibold"
             >
               {{ t("dms.form.image.alt_label") }}
             </label>
             <UTextarea
-              :id="`${detailItem.id}-alt-detail`"
+              :id="detailAltInputId"
               v-model="detailAltDraft"
               :placeholder="t('dms.form.image.alt_placeholder')"
               :rows="3"

package/frontend-vue/layers/dms-ui/app/components/form/components/Relation.vue

@@ -31,7 +31,7 @@ interface RelationProps extends SelectMenuProps<T, "value", M> {
     disabled?: string;
   };
   addForm?: { componentName: string; options?: FormProps };
-  addPermissionId?: string;
+  addPermissionIds?: string[];
 }
 
 const props = withDefaults(defineProps<RelationProps>(), {
@@ -48,7 +48,7 @@ const forwardedProps = computed(() => {
     deselectable: ____,
     modelValue: _____,
     addForm: ______,
-    addPermissionId: _______,
+    addPermissionIds: _______,
     ...rest
   } = props;
   return rest as SelectMenuProps<T, "value", M>;
@@ -110,7 +110,8 @@ const canAdd = computed(
   () =>
     !!props.addForm &&
     !!props.addForm.options?.submitUrl &&
-    (!props.addPermissionId || hasPermission(props.addPermissionId)),
+    (!props.addPermissionIds?.length ||
+      props.addPermissionIds.some((id) => hasPermission(id))),
 );
 
 interface RelationResponse {

package/frontend-vue/layers/dms-ui/app/composables/form/types/api.ts

@@ -1,8 +1,9 @@
 import type { FormData } from "./value";
+import type { WarningResponse } from "../../../utils/responseWarning";
 
 export interface FormFetchResponse extends FormData {}
 
-export interface FormSubmitResponse {
+export interface FormSubmitResponse extends WarningResponse {
   success?: boolean;
   message?: string;
 }

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -7,6 +7,7 @@ import { FormEvents } from "./types/events";
 import type { FormData, FormFieldValue } from "./types/value";
 import type { FormField, FormFieldOrGroup } from "./types/field";
 import { isFieldGroup } from "./types/field";
+import { resolveResponseToast } from "../../utils/responseWarning";
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 
 interface FormResetTarget {
@@ -492,14 +493,20 @@ export const useForm = (props: FormProps) => {
     ),
   );
 
-  const showSubmitSuccessToast = () => {
-    toast.add({
-      title: processI18n("$dms.form.success_title"),
-      description: processI18n(
-        props.successMessage || "$dms.form.success_message",
+  const showSubmitSuccessToast = (response: FormSubmitResponse | undefined) => {
+    toast.add(
+      resolveResponseToast(
+        response,
+        {
+          title: processI18n("$dms.form.success_title"),
+          description: processI18n(
+            props.successMessage || "$dms.form.success_message",
+          ),
+          color: Color.success,
+        },
+        { processI18n, processApiMessage },
       ),
-      color: Color.success,
-    });
+    );
   };
 
   const resolveSubmitErrorDescription = (error: EventError) => {
@@ -520,7 +527,7 @@ export const useForm = (props: FormProps) => {
     response: FormSubmitResponse | undefined,
     plainData: FormData,
   ) => {
-    showSubmitSuccessToast();
+    showSubmitSuccessToast(response);
     props.onSuccessCallback?.(response, plainData);
     initialValues.value = snapshotFormState(state.value);
     if (props.redirectOnSuccess) {

package/frontend-vue/layers/dms-ui/app/composables/form/useUploadWithProgress.ts

@@ -7,6 +7,47 @@ export interface PresignResponse {
 const UPLOAD_SUCCESS_MIN = 200;
 const UPLOAD_SUCCESS_MAX = 300;
 
+/**
+ * Request headers a browser refuses to let script set (Fetch standard,
+ * "forbidden request-header"). A presign may still list them -- the storage
+ * signs `Content-Length` -- and the browser sends them itself, so copying them
+ * only logs `Refused to set unsafe header` on every upload.
+ */
+const FORBIDDEN_REQUEST_HEADERS = new Set([
+  "accept-charset",
+  "accept-encoding",
+  "access-control-request-headers",
+  "access-control-request-method",
+  "connection",
+  "content-length",
+  "cookie",
+  "cookie2",
+  "date",
+  "dnt",
+  "expect",
+  "host",
+  "keep-alive",
+  "origin",
+  "referer",
+  "set-cookie",
+  "te",
+  "trailer",
+  "transfer-encoding",
+  "upgrade",
+  "via",
+]);
+const FORBIDDEN_REQUEST_HEADER_PREFIXES = ["proxy-", "sec-"];
+
+const isForbiddenRequestHeader = (name: string): boolean => {
+  const normalized = name.trim().toLowerCase();
+  return (
+    FORBIDDEN_REQUEST_HEADERS.has(normalized) ||
+    FORBIDDEN_REQUEST_HEADER_PREFIXES.some((prefix) =>
+      normalized.startsWith(prefix),
+    )
+  );
+};
+
 /**
  * Uploads a file to the presigned storage URL with a PUT request, reporting
  * real upload progress and rejecting on a non-2xx response (a plain `fetch`
@@ -21,9 +62,9 @@ export function useUploadWithProgress() {
     new Promise((resolve, reject) => {
       const xhr = new XMLHttpRequest();
       xhr.open("PUT", presign.uploadUrl);
-      Object.entries(presign.headers ?? {}).forEach(([name, value]) =>
-        xhr.setRequestHeader(name, value),
-      );
+      Object.entries(presign.headers ?? {})
+        .filter(([name]) => !isForbiddenRequestHeader(name))
+        .forEach(([name, value]) => xhr.setRequestHeader(name, value));
       xhr.upload.onprogress = (event) => {
         if (!event.lengthComputable) return;
         onProgress(Math.round((event.loaded / event.total) * 100));

package/frontend-vue/layers/dms-ui/app/utils/metadataRetry.ts

@@ -0,0 +1,47 @@
+// Retry policy for reading a stored file's metadata. A refused or missing file
+// will not come back by asking again, so only failures that can heal on their
+// own (network, 5xx, rate limiting) are retried, and with a capped backoff.
+
+interface FetchFailure {
+  statusCode?: number;
+  status?: number;
+}
+
+const RETRY_BASE_DELAY_MS = 1000;
+const RETRY_MAX_DELAY_MS = 30000;
+const CLIENT_ERROR_STATUS_MIN = 400;
+const CLIENT_ERROR_STATUS_MAX = 499;
+const TRANSIENT_CLIENT_STATUSES = new Set([408, 425, 429]);
+
+function failureStatus(error: unknown): number | undefined {
+  if (!error || typeof error !== "object") return undefined;
+  const { statusCode, status } = error as FetchFailure;
+  return statusCode ?? status;
+}
+
+/**
+ * A 4xx (404 gone, 403 denied, 410…) is the server's final answer about this
+ * file; request timeouts and rate limiting are the exceptions that can heal.
+ */
+export function isDefinitiveMetadataFailure(error: unknown): boolean {
+  const status = failureStatus(error);
+  return (
+    status !== undefined &&
+    status >= CLIENT_ERROR_STATUS_MIN &&
+    status <= CLIENT_ERROR_STATUS_MAX &&
+    !TRANSIENT_CLIENT_STATUSES.has(status)
+  );
+}
+
+/**
+ * Delay before retrying after `failedAttempts` consecutive failures, or `null`
+ * when the failure is definitive and the read must not be retried.
+ */
+export function resolveMetadataRetryDelay(
+  error: unknown,
+  failedAttempts: number,
+): number | null {
+  if (isDefinitiveMetadataFailure(error)) return null;
+  const exponent = Math.max(failedAttempts - 1, 0);
+  return Math.min(RETRY_BASE_DELAY_MS * 2 ** exponent, RETRY_MAX_DELAY_MS);
+}

package/frontend-vue/layers/dms-ui/app/utils/responseWarning.ts

@@ -0,0 +1,46 @@
+import { Color } from "#dms-core/app/types/color";
+
+const WARNING_TITLE_KEY = "$dms.form.warning_title";
+
+/**
+ * A response to an action that went through but left something the user has
+ * to act on — an invitation created whose email did not leave. `warning` is
+ * an API message (an i18n key or plain text), shown in place of the success
+ * message.
+ */
+export interface WarningResponse {
+  warning?: string;
+}
+
+export interface ResponseToast {
+  color: Color;
+  title: string;
+  description?: string;
+}
+
+interface ResponseToastTranslation {
+  processI18n: (key: string) => string;
+  processApiMessage: (message: unknown) => string;
+}
+
+/** The warning a response carries, or `undefined` when it reports a plain success. */
+export function readResponseWarning(response: unknown): string | undefined {
+  if (!response || typeof response !== "object") return undefined;
+  const { warning } = response as WarningResponse;
+  return typeof warning === "string" && warning ? warning : undefined;
+}
+
+/** `success`, unless the response carries a warning, which is told instead. */
+export function resolveResponseToast(
+  response: unknown,
+  success: ResponseToast,
+  { processI18n, processApiMessage }: ResponseToastTranslation,
+): ResponseToast {
+  const warning = readResponseWarning(response);
+  if (!warning) return success;
+  return {
+    color: Color.warning,
+    title: processI18n(WARNING_TITLE_KEY),
+    description: processApiMessage(warning),
+  };
+}

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -159,6 +159,7 @@
     "form": {
       "success_title": "Success",
       "success_message": "Data has been successfully saved",
+      "warning_title": "Done, with a warning",
       "error_title": "Error",
       "error_unknown": "An unknown error occurred",
       "error_no_target": "This form does not know which item to save. Open it from a link that names one.",
@@ -223,7 +224,8 @@
         "uploaded_files": "Uploaded files",
         "rejected_title": "File not added",
         "rejected_size": "{name} exceeds the maximum size ({size})",
-        "rejected_type": "{name} is not an allowed file type"
+        "rejected_type": "{name} is not an allowed file type",
+        "file_unavailable": "File unavailable"
       },
       "image": {
         "add": "Add",
@@ -233,6 +235,7 @@
         "single_hint": "Single image",
         "formats_any": "Any image format",
         "upload_failed": "Upload failed",
+        "file_unavailable": "File unavailable",
         "retry": "Retry",
         "replace": "Replace",
         "delete": "Delete",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -159,6 +159,7 @@
     "form": {
       "success_title": "Succès",
       "success_message": "Les données ont été enregistrées avec succès",
+      "warning_title": "Terminé, avec un avertissement",
       "error_title": "Erreur",
       "error_unknown": "Une erreur inconnue s'est produite",
       "error_no_target": "Ce formulaire ne sait pas quel élément enregistrer. Ouvrez-le depuis un lien qui en désigne un.",
@@ -224,7 +225,8 @@
         "uploaded_files": "Fichiers téléversés",
         "rejected_title": "Fichier non ajouté",
         "rejected_size": "{name} dépasse la taille maximale ({size})",
-        "rejected_type": "{name} n'est pas un type de fichier autorisé"
+        "rejected_type": "{name} n'est pas un type de fichier autorisé",
+        "file_unavailable": "Fichier indisponible"
       },
       "image": {
         "add": "Ajouter",
@@ -234,6 +236,7 @@
         "single_hint": "Une seule image",
         "formats_any": "Tous formats d'image",
         "upload_failed": "Échec de l'envoi",
+        "file_unavailable": "Fichier indisponible",
         "retry": "Réessayer",
         "replace": "Remplacer",
         "delete": "Supprimer",