contentoh-components-library 21.6.49 → 21.6.50

package/src/global-files/digital-assets/assets.adapter.js

@@ -0,0 +1,229 @@
+/**
+ * Traducción entre el activo digital como lo guarda el backend y como lo usa la
+ * interfaz.
+ *
+ * DOS DECISIONES DEL NEGOCIO QUE SE NOTAN EN ESTE MODELO:
+ *
+ * - **Los activos no tienen versión.** Un activo general es el mismo sin
+ *   importar la versión del producto, así que no lleva `id_version` ni en el
+ *   modelo ni en la clave de S3. Eso evita el problema que sí tienen las
+ *   imágenes —copiar archivos al crear una versión— y hace que un video subido
+ *   en la v2 se vea también al mirar la v1.
+ * - **Por ahora todos son generales**, o sea `id_retailer = null`. La columna
+ *   existe y este adaptador ya la respeta para cuando se pida acotar un activo
+ *   a una cadena; hasta entonces nada la escribe.
+ *
+ * Es el único archivo que conoce los nombres de campo del backend. Mientras el
+ * contrato siga sin cerrarse, todo lo demás —tarjetas, bandeja, validaciones—
+ * se construye contra el modelo de esta capa; cuando el contrato quede fijo se
+ * ajustan estas funciones y nada más.
+ *
+ * El contrato propuesto está en `rel_article_asset`: una tabla aparte de
+ * `rel_article_image`, porque esa última guarda una sola fila por
+ * (artículo, versión, tipo de toma) y pisaría un activo con el siguiente.
+ */
+
+import { getAssetType, getExtension, suggestAssetType } from "./assetTypes";
+
+/**
+ * Estado de un activo en pantalla. `pending`/`uploading`/`error` solo existen
+ * en el navegador: un activo con id del backend siempre está `saved`.
+ */
+export const ASSET_STATUS = {
+  PENDING: "pending",
+  UPLOADING: "uploading",
+  SAVED: "saved",
+  ERROR: "error",
+};
+
+const IMAGES_BUCKET = () => process.env.REACT_APP_IMAGES_BUCKET;
+
+/**
+ * URL directa al objeto en S3.
+ *
+ * A propósito NO pasa por el redimensionador de CloudFront: ese servicio
+ * reescribe la imagen con sharp y para un mp4, un gif animado o un pdf
+ * devuelve basura. Es la misma URL que ya usa la descarga de imágenes.
+ */
+export const buildAssetUrl = (key) => {
+  if (!key) return "";
+  if (/^https?:\/\//i.test(key)) return key;
+  return `https://${IMAGES_BUCKET()}.s3.amazonaws.com/${key}`;
+};
+
+/**
+ * `Number(null)` y `Number("")` son 0, no NaN. Sin descartarlos antes, un
+ * `id_retailer: null` —que significa "de todas las cadenas"— se convierte en el
+ * retailer 0 y el activo deja de verse en ninguna; una duración nula se vuelve
+ * un video de cero segundos.
+ */
+const toNumberOrNull = (value) => {
+  if (value === null || value === undefined || value === "") return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+/**
+ * Fila del backend -> modelo de interfaz.
+ *
+ * Acepta `url` ya resuelta si el backend la manda; si no, la arma desde la
+ * clave de S3. Así el front funciona igual con cualquiera de las dos formas del
+ * contrato y no hay que esperar a que se decida para seguir construyendo.
+ */
+export const fromBackend = (row = {}) => {
+  const ext = row.ext || getExtension(row.name || row.src);
+  const assetType =
+    row.asset_type || suggestAssetType({ mime: row.mime, name: row.name });
+
+  return {
+    id: row.id ?? null,
+    tempId: null,
+    assetType,
+    name: row.name || "",
+    ext,
+    mime: row.mime || "",
+    sizeBytes: toNumberOrNull(row.size_bytes),
+    duration: toNumberOrNull(row.duration),
+    width: toNumberOrNull(row.width),
+    height: toNumberOrNull(row.height),
+    // Clave en S3. Se conserva porque es lo que el backend necesita de vuelta;
+    // la URL es derivada y no debe viajar en el payload.
+    src: row.src || "",
+    url: row.url || buildAssetUrl(row.src),
+    poster: row.poster ? buildAssetUrl(row.poster) : "",
+    // `id_retailer` nulo = activo general, que es lo único que se escribe hoy.
+    retailerId: toNumberOrNull(row.id_retailer),
+    createdAt: row.created_at || null,
+    file: null,
+    status: ASSET_STATUS.SAVED,
+    progress: 100,
+    error: null,
+  };
+};
+
+export const fromBackendList = (rows = []) =>
+  Array.isArray(rows) ? rows.map(fromBackend) : [];
+
+let tempCounter = 0;
+
+/**
+ * Archivo recién elegido -> modelo de interfaz.
+ *
+ * El `File` nativo se guarda tal cual, sin leerlo a base64. Convertirlo cuesta
+ * un tercio más de memoria y es lo que hoy vuelve imposible subir un video
+ * largo o un manual grande; con el `File` intacto da igual si termina subiendo
+ * por URL prefirmada o por el cliente de S3.
+ *
+ * El `tempId` permite seguirle la pista a un activo que todavía no tiene id del
+ * backend: sin él no hay forma de actualizar su progreso ni de quitarlo de la
+ * lista si falla.
+ */
+export const fromFile = (file, { assetType, objectUrl } = {}) => {
+  tempCounter += 1;
+  const ext = getExtension(file?.name);
+
+  return {
+    id: null,
+    tempId: `tmp-${Date.now()}-${tempCounter}`,
+    assetType:
+      assetType || suggestAssetType({ mime: file?.type, name: file?.name }),
+    name: file?.name || "",
+    ext,
+    mime: file?.type || "",
+    sizeBytes: toNumberOrNull(file?.size),
+    duration: null,
+    width: null,
+    height: null,
+    src: "",
+    // `URL.createObjectURL` deja ver el archivo sin subirlo ni codificarlo.
+    // Quien lo crea es responsable de liberarlo con `revokeAssetUrl`.
+    url: objectUrl || "",
+    poster: "",
+    retailerId: null,
+    createdAt: null,
+    file,
+    status: ASSET_STATUS.PENDING,
+    progress: 0,
+    error: null,
+  };
+};
+
+/** Identificador estable de un activo, tenga o no id del backend. */
+export const assetKey = (asset = {}) =>
+  asset.id ?? asset.tempId ?? asset.src ?? asset.name;
+
+export const isPersisted = (asset = {}) =>
+  asset.id !== null && asset.id !== undefined;
+
+/**
+ * Modelo de interfaz -> payload del backend.
+ *
+ * Nunca incluye `file` ni `url`: el archivo ya está en S3 cuando esto se envía
+ * y la URL es derivada. Es la misma razón por la que el guardado de imágenes
+ * borra `src`/`video_src` antes del PUT — el binario en el cuerpo devuelve 413.
+ */
+export const toPayload = (asset = {}) => {
+  const payload = {
+    asset_type: asset.assetType,
+    name: asset.name,
+    ext: asset.ext,
+    mime: asset.mime,
+    size_bytes: asset.sizeBytes ?? null,
+    duration: asset.duration ?? null,
+    width: asset.width ?? null,
+    height: asset.height ?? null,
+    key: asset.src || null,
+  };
+
+  if (isPersisted(asset)) payload.id = asset.id;
+  if (asset.retailerId !== null && asset.retailerId !== undefined) {
+    payload.id_retailer = asset.retailerId;
+  }
+
+  return payload;
+};
+
+/**
+ * Separa la lista en lo que el backend espera recibir: altas, cambios y bajas.
+ * `deleted` son ids, no objetos, porque para borrar no hace falta nada más.
+ */
+export const buildSavePayload = ({
+  assets = [],
+  updated = [],
+  deleted = [],
+} = {}) => ({
+  newAssets: assets.filter((asset) => !isPersisted(asset)).map(toPayload),
+  updateAssets: updated.filter(isPersisted).map(toPayload),
+  deleteAssets: deleted
+    .map((asset) => (typeof asset === "object" ? asset.id : asset))
+    .filter(Boolean),
+});
+
+/**
+ * Qué activos ve la cadena activa: los generales (`retailerId` nulo) más los
+ * suyos.
+ *
+ * Hoy todos son generales, así que en la práctica no filtra nada. Se deja
+ * escrito y probado para el día que se pida acotar un activo a una cadena: ese
+ * día basta con que el backend mande el `id_retailer`, sin tocar la pantalla.
+ */
+export const filterByRetailer = (assets = [], retailerId) => {
+  if (!retailerId) return assets;
+  return assets.filter(
+    (asset) =>
+      asset.retailerId === null ||
+      asset.retailerId === undefined ||
+      Number(asset.retailerId) === Number(retailerId)
+  );
+};
+
+/** Libera el object URL de un activo local. Sin esto el archivo se queda en memoria. */
+export const revokeAssetUrl = (asset = {}) => {
+  if (asset.file && asset.url && asset.url.startsWith("blob:")) {
+    URL.revokeObjectURL(asset.url);
+  }
+};
+
+/** Etiqueta legible del tipo, para badges y tablas. */
+export const assetTypeLabel = (asset = {}) =>
+  getAssetType(asset.assetType).label;

package/src/global-files/digital-assets/assets.mock.js

@@ -0,0 +1,122 @@
+/**
+ * Activos de ejemplo con la forma EXACTA que devolvería el backend, para
+ * Storybook y pruebas.
+ *
+ * Están crudos a propósito, sin pasar por `fromBackend`: así, si el contrato
+ * cambia, estos objetos se editan y el adaptador se prueba de verdad en vez de
+ * comparar el modelo de interfaz contra sí mismo.
+ */
+
+export const backendAssetsMock = [
+  {
+    id: 91,
+    asset_type: "360",
+    name: "giro_producto.mp4",
+    ext: "mp4",
+    mime: "video/mp4",
+    size_bytes: 8412160,
+    duration: 12,
+    width: 1080,
+    height: 1080,
+    src: "id-136038/assets/91-6d0f9a1e-0f0c-4a2b-9f1d-2a7c1b3e5d90.mp4",
+    poster: "id-136038/assets/91-6d0f9a1e-0f0c-4a2b-9f1d-2a7c1b3e5d90.jpg",
+    id_retailer: null,
+    created_at: "2026-09-10T16:22:04.000Z",
+  },
+  {
+    id: 92,
+    asset_type: "360",
+    name: "giro_empaque.gif",
+    ext: "gif",
+    mime: "image/gif",
+    size_bytes: 3145728,
+    duration: null,
+    width: 800,
+    height: 800,
+    src: "id-136038/assets/92-b1c2d3e4-1111-2222-3333-444455556666.gif",
+    poster: null,
+    id_retailer: null,
+    created_at: "2026-09-10T16:24:41.000Z",
+  },
+  {
+    id: 93,
+    asset_type: "video",
+    name: "demostracion_uso.mp4",
+    ext: "mp4",
+    mime: "video/mp4",
+    size_bytes: 54525952,
+    duration: 96,
+    width: 1920,
+    height: 1080,
+    src: "id-136038/assets/93-77aa88bb-99cc-4dd0-8ee1-ff0011223344.mp4",
+    poster: "id-136038/assets/93-77aa88bb-99cc-4dd0-8ee1-ff0011223344.jpg",
+    // Activo de una sola cadena: sirve para probar `filterByRetailer`.
+    id_retailer: 1017,
+    created_at: "2026-09-11T09:02:17.000Z",
+  },
+  {
+    id: 94,
+    asset_type: "documento",
+    name: "manual_de_usuario.pdf",
+    ext: "pdf",
+    mime: "application/pdf",
+    size_bytes: 2418192,
+    duration: null,
+    width: null,
+    height: null,
+    src: "id-136038/assets/94-cc55dd66-7788-99aa-bbcc-ddeeff001122.pdf",
+    poster: null,
+    id_retailer: null,
+    created_at: "2026-09-12T11:48:00.000Z",
+  },
+  {
+    id: 96,
+    asset_type: "editable",
+    name: "arte_empaque.psd",
+    ext: "psd",
+    // El navegador no le asigna mime a un .psd: llega vacío. Es el caso que
+    // obliga a resolver el tipo por extensión.
+    mime: "",
+    size_bytes: 268435456,
+    duration: null,
+    width: null,
+    height: null,
+    src: "id-136038/assets/96-11223344-5566-7788-99aa-bbccddeeff00.psd",
+    poster: null,
+    id_retailer: null,
+    created_at: "2026-09-15T10:12:33.000Z",
+  },
+  {
+    id: 97,
+    asset_type: "hoja_calculo",
+    name: "tabla_de_medidas.xlsx",
+    ext: "xlsx",
+    mime: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    size_bytes: 48128,
+    duration: null,
+    width: null,
+    height: null,
+    src: "id-136038/assets/97-99887766-5544-3322-1100-ffeeddccbbaa.xlsx",
+    poster: null,
+    id_retailer: null,
+    created_at: "2026-09-15T10:14:02.000Z",
+  },
+];
+
+/**
+ * Caso incompleto a propósito: sin `mime`, sin `ext` y sin `url`. El backend
+ * todavía no existe y es muy probable que las primeras respuestas lleguen así;
+ * el adaptador tiene que poder deducirlos del nombre y de la clave de S3.
+ */
+export const partialBackendAssetMock = {
+  id: 95,
+  name: "ficha_tecnica.pdf",
+  src: "id-136038/assets/95-aa11bb22-cc33-dd44-ee55-ff6677889900.pdf",
+};
+
+/** `File` falso para probar validaciones sin tocar disco ni red. */
+export const makeFileMock = ({
+  name = "giro_producto.mp4",
+  type = "video/mp4",
+  size = 8412160,
+} = {}) => ({ name, type, size });

package/src/global-files/digital-assets/assets.reducer.js

@@ -0,0 +1,197 @@
+import { ASSET_ACTIONS, assetsInitialState } from "./assets.actions";
+import { assetKey, isPersisted } from "./assets.adapter";
+
+export { assetsInitialState };
+
+/*
+  Estado de los activos digitales de la ficha.
+
+  Separado de `active-state` a propósito: ese reducer ya lleva 344 líneas y toda
+  la lógica de imágenes, que no comparte nada con esto —los activos no tienen
+  tipo de toma, ni obligatoriedad, ni cupo por cadena—.
+
+  Vive aquí y no en `context/reducers/` —donde están los otros cuatro— porque no
+  depende de la pantalla: es una función pura sobre activos, igual que el
+  adaptador y el catálogo. Así el hook y las historias de Storybook lo usan sin
+  arrastrar la ficha completa, y `provider-product-edition.reducer.js` solo lo
+  enchufa con una línea, igual que a los demás.
+
+  El reducer es puro. Liberar los object URL de los archivos locales es un efecto
+  y se hace en el hook antes de despachar; meterlo aquí rompería poder probar
+  este archivo sin navegador.
+*/
+export const assetsReducer = (state, action) => {
+  switch (action.type) {
+    case ASSET_ACTIONS.SET_ASSETS_VALUES: {
+      return {
+        ...state,
+        assets_values: Array.isArray(action.payload) ? action.payload : [],
+        // Lo que venga del backend es, por definición, lo ya guardado: no hay
+        // nada pendiente de enviar.
+        updated_assets: [],
+        deleted_assets: [],
+        selected_assets: [],
+        all_assets_checked: false,
+      };
+    }
+
+    case ASSET_ACTIONS.ADD_ASSETS: {
+      const incoming = Array.isArray(action.payload)
+        ? action.payload
+        : [action.payload];
+
+      return {
+        ...state,
+        assets_values: [...state.assets_values, ...incoming],
+      };
+    }
+
+    case ASSET_ACTIONS.UPDATE_ASSET: {
+      const { key, changes } = action.payload;
+      let touched = null;
+
+      const assets_values = state.assets_values.map((asset) => {
+        if (assetKey(asset) !== key) return asset;
+        touched = asset;
+        return { ...asset, ...changes };
+      });
+
+      // Un activo que todavía no existe en el backend no se "actualiza": se
+      // creará con los valores finales, así que no hay nada que rastrear.
+      const shouldTrack = touched
+        && isPersisted(touched)
+        && !state.updated_assets.includes(key);
+
+      return {
+        ...state,
+        assets_values,
+        updated_assets: shouldTrack
+          ? [...state.updated_assets, key]
+          : state.updated_assets,
+      };
+    }
+
+    case ASSET_ACTIONS.PATCH_ASSET: {
+      const { key, changes } = action.payload;
+
+      return {
+        ...state,
+        assets_values: state.assets_values.map((asset) => (
+          assetKey(asset) === key ? { ...asset, ...changes } : asset
+        )),
+      };
+    }
+
+    case ASSET_ACTIONS.REMOVE_ASSET: {
+      const { key } = action.payload;
+      const target = state.assets_values.find((asset) => assetKey(asset) === key);
+
+      if (!target) return state;
+
+      const assets_values = state.assets_values.filter(
+        (asset) => assetKey(asset) !== key,
+      );
+      const selected_assets = state.selected_assets.filter(
+        (asset) => assetKey(asset) !== key,
+      );
+
+      return {
+        ...state,
+        assets_values,
+        // Solo se le pide al backend que borre lo que el backend tiene. Un
+        // activo local que nunca se subió simplemente desaparece.
+        deleted_assets: isPersisted(target)
+          ? [...state.deleted_assets, target.id]
+          : state.deleted_assets,
+        // Sin esto, un activo borrado seguiría contando como seleccionado y como
+        // modificado: el guardado intentaría enviar un activo que ya no existe.
+        updated_assets: state.updated_assets.filter((item) => item !== key),
+        selected_assets,
+        // Se recalcula en vez de apagarse: si estaban todos marcados y se borra
+        // uno, los que quedan siguen marcados y la casilla de "seleccionar todo"
+        // debe seguir reflejándolo.
+        all_assets_checked:
+          assets_values.length > 0
+          && selected_assets.length === assets_values.length,
+      };
+    }
+
+    case ASSET_ACTIONS.SET_SELECTED_ASSETS: {
+      const selected = Array.isArray(action.payload) ? action.payload : [];
+
+      return {
+        ...state,
+        selected_assets: selected,
+        all_assets_checked:
+          state.assets_values.length > 0
+          && selected.length === state.assets_values.length,
+      };
+    }
+
+    case ASSET_ACTIONS.TOGGLE_CHECK_ALL_ASSETS: {
+      // Con la lista vacía no hay nada que marcar: dejarlo en `true` pintaría la
+      // casilla de "seleccionar todo" activa sobre una bandeja sin activos.
+      const isChecked = Boolean(action.payload) && state.assets_values.length > 0;
+
+      return {
+        ...state,
+        all_assets_checked: isChecked,
+        selected_assets: isChecked ? [...state.assets_values] : [],
+      };
+    }
+
+    case ASSET_ACTIONS.CLEAR_ASSETS_TRACKING: {
+      return {
+        ...state,
+        updated_assets: [],
+        deleted_assets: [],
+      };
+    }
+
+    default: {
+      return null;
+    }
+  }
+};
+
+/**
+ * Los tres grupos que espera el backend, listos para `buildSavePayload`.
+ *
+ * Se deriva de `assets_values` en el momento de guardar, no se acumula: las
+ * claves rastreadas dicen QUÉ cambió y el objeto vigente dice CÓMO quedó. Es lo
+ * que evita enviar el valor anterior cuando el usuario edita dos veces el mismo
+ * activo antes de guardar.
+ */
+export const selectAssetsToSave = (state) => ({
+  assets: state.assets_values,
+  updated: state.assets_values.filter((asset) => state.updated_assets.includes(assetKey(asset))),
+  deleted: state.deleted_assets,
+});
+
+/** ¿Hay algo sin guardar? Sirve para avisar antes de salir y para habilitar el botón. */
+/**
+ * Desglose de lo que falta por guardar.
+ *
+ * Se cuenta por separado —altas, cambios, bajas— y no como un número suelto
+ * porque "3 cambios sin guardar" no le dice al usuario qué perdería si se va:
+ * no es lo mismo dejar sin guardar un borrado que un archivo recién subido.
+ *
+ * Un activo nuevo solo cuenta si ya está en S3. Uno que todavía se está
+ * subiendo, o que falló, no es un cambio pendiente de guardar: es un archivo que
+ * aún no existe, y anunciarlo como tal haría que el contador subiera y bajara
+ * solo mientras la barra de progreso avanza.
+ */
+export const countUnsavedAssets = (state) => {
+  const nuevos = state.assets_values.filter(
+    (asset) => !isPersisted(asset) && Boolean(asset.src),
+  ).length;
+
+  return {
+    nuevos,
+    modificados: state.updated_assets.length,
+    borrados: state.deleted_assets.length,
+    total: nuevos + state.updated_assets.length + state.deleted_assets.length,
+  };
+};
+
+export const hasUnsavedAssets = (state) => countUnsavedAssets(state).total > 0;

package/src/global-files/digital-assets/uploadAssets.js

@@ -0,0 +1,109 @@
+/**
+ * Subida de activos digitales a S3.
+ *
+ * El archivo NO pasa por ningún Lambda ni se convierte a base64. El backend
+ * firma la subida y el navegador manda el archivo directo al bucket. Es lo que
+ * permite subir un .psd de 300 MB: el camino que usan hoy las imágenes
+ * —`FileReader.readAsDataURL` y `putObject` con las llaves de AWS en el
+ * bundle— carga el archivo entero en memoria y lo infla un tercio.
+ *
+ * Es un POST multipart y no un PUT porque el backend firma con
+ * `createPresignedPost`, la única forma de que S3 aplique de verdad el tope de
+ * tamaño y el Content-Type. Con un PUT firmado, quien tenga la URL sube lo que
+ * quiera del tamaño que quiera.
+ */
+
+import axios from "axios";
+
+import { toPayload } from "./assets.adapter";
+
+/**
+ * Pide al backend que firme la subida de varios archivos a la vez.
+ *
+ * En una sola llamada y no una por archivo: soltar diez archivos son diez
+ * viajes de ida y vuelta que no hacen falta.
+ *
+ * Devuelve `uploads` (los que se firmaron) y `rejected` (los que el servidor no
+ * aceptó, con su motivo). El servidor valida por su cuenta aunque el front ya
+ * lo haya hecho: el front se puede saltar, y quien firma decide qué entra al
+ * bucket.
+ */
+export const requestPresign = async ({ articleId, assets, token }) => {
+  const { data } = await axios.post(
+    process.env.REACT_APP_ASSETS_PRESIGN_ENDPOINT,
+    {
+      articleId,
+      files: assets.map((asset) => ({
+        // El `ref` vuelve tal cual en la respuesta. Emparejar por nombre sería
+        // frágil: dos archivos que se llamen igual acabarían con la clave del
+        // otro.
+        ref: asset.tempId,
+        ...toPayload(asset),
+      })),
+    },
+    { headers: { Authorization: token } },
+  );
+
+  // `integration: lambda` de API Gateway devuelve el objeto del handler tal
+  // cual, con el cuerpo como cadena, en vez de traducirlo a una respuesta HTTP.
+  const body = typeof data?.body === "string" ? JSON.parse(data.body) : data?.body ?? data;
+
+  if (data?.statusCode && data.statusCode >= 400) {
+    throw new Error(body?.message || "No se pudo preparar la subida");
+  }
+
+  return { uploads: body?.uploads ?? [], rejected: body?.rejected ?? [] };
+};
+
+/**
+ * Sube un archivo con los campos que firmó el backend.
+ *
+ * Se usa XMLHttpRequest y no fetch porque fetch todavía no sabe informar del
+ * progreso de subida. En un .psd de 300 MB la barra no es un adorno: sin ella
+ * la pantalla parece colgada durante minutos.
+ *
+ * El orden del FormData importa: S3 exige que el archivo vaya AL FINAL, después
+ * de todos los campos de la política. Si va antes, rechaza la petición.
+ */
+export const uploadToS3 = ({ upload, file, onProgress }) => new Promise((resolve, reject) => {
+  const form = new FormData();
+  Object.entries(upload.fields).forEach(([name, value]) => form.append(name, value));
+  form.append("file", file);
+
+  const xhr = new XMLHttpRequest();
+  xhr.open("POST", upload.url, true);
+
+  xhr.upload.onprogress = (event) => {
+    if (!event.lengthComputable) return;
+    onProgress?.(Math.round((event.loaded / event.total) * 100));
+  };
+
+  xhr.onload = () => {
+    // S3 responde 204 sin cuerpo cuando acepta el archivo.
+    if (xhr.status >= 200 && xhr.status < 300) {
+      resolve(upload.key);
+      return;
+    }
+    /*
+      Los errores de S3 vienen en XML, no en JSON. Los dos que importan:
+      EntityTooLarge = el archivo se pasó del tope que firmamos, y AccessDenied
+      = al rol del Lambda le falta s3:PutObject sobre el prefijo, o sea que se
+      desplegó solo la función y no el servicio completo.
+    */
+    const code = /<Code>(.*?)<\/Code>/.exec(xhr.responseText)?.[1];
+    reject(new Error(code === "EntityTooLarge"
+      ? "El archivo supera el tamaño permitido."
+      : `S3 rechazó la subida (${code || xhr.status}).`));
+  };
+
+  xhr.onerror = () => reject(new Error(
+    // Un fallo de red sin estatus casi siempre es CORS: el bucket tiene que
+    // permitir POST desde el origen de la aplicación. El navegador corta la
+    // petición antes de mandarla y no deja rastro en ningún log del servidor.
+    "No se pudo conectar con el almacenamiento. Revisa la configuración CORS del bucket.",
+  ));
+
+  xhr.onabort = () => reject(new Error("Subida cancelada."));
+
+  xhr.send(form);
+});