contentoh-components-library 21.6.55 → 21.6.57

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

@@ -0,0 +1,202 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadToS3 = exports.requestPresign = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _assets = require("./assets.adapter");
+
+/**
+ * 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.
+ */
+
+/**
+ * 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.
+ */
+var requestPresign = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var _data, _data$body, _data2, _data3, _body$uploads, _body$rejected;
+
+    var articleId, assets, token, data, _yield$axios$post, body;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            articleId = _ref.articleId, assets = _ref.assets, token = _ref.token;
+            _context.prev = 1;
+            _context.next = 4;
+            return _axios.default.post(process.env.REACT_APP_ASSETS_PRESIGN_ENDPOINT, {
+              articleId: articleId,
+              files: assets.map(function (asset) {
+                return (0, _objectSpread2.default)({
+                  // 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
+                }, (0, _assets.toPayload)(asset));
+              })
+            }, {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 4:
+            _yield$axios$post = _context.sent;
+            data = _yield$axios$post.data;
+            _context.next = 12;
+            break;
+
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+            // "Network Error" o "Request failed with status code 502" no le dicen nada
+            // al usuario. El detalle queda en la consola para quien lo diagnostique.
+            console.error("Activos digitales: falló la firma de la subida", _context.t0);
+            throw new Error("No se pudo preparar la subida. Revisa tu conexión e inténtalo de nuevo.");
+
+          case 12:
+            // `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.
+            body = typeof ((_data = data) === null || _data === void 0 ? void 0 : _data.body) === "string" ? JSON.parse(data.body) : (_data$body = (_data2 = data) === null || _data2 === void 0 ? void 0 : _data2.body) !== null && _data$body !== void 0 ? _data$body : data;
+
+            if (!((_data3 = data) !== null && _data3 !== void 0 && _data3.statusCode && data.statusCode >= 400)) {
+              _context.next = 15;
+              break;
+            }
+
+            throw new Error((body === null || body === void 0 ? void 0 : body.message) || "No se pudo preparar la subida");
+
+          case 15:
+            return _context.abrupt("return", {
+              uploads: (_body$uploads = body === null || body === void 0 ? void 0 : body.uploads) !== null && _body$uploads !== void 0 ? _body$uploads : [],
+              rejected: (_body$rejected = body === null || body === void 0 ? void 0 : body.rejected) !== null && _body$rejected !== void 0 ? _body$rejected : []
+            });
+
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 8]]);
+  }));
+
+  return function requestPresign(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+/**
+ * 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.
+ */
+
+
+exports.requestPresign = requestPresign;
+
+var uploadToS3 = function uploadToS3(_ref3) {
+  var upload = _ref3.upload,
+      file = _ref3.file,
+      onProgress = _ref3.onProgress;
+  return new Promise(function (resolve, reject) {
+    var form = new FormData();
+    Object.entries(upload.fields).forEach(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+          name = _ref5[0],
+          value = _ref5[1];
+
+      return form.append(name, value);
+    });
+    form.append("file", file);
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", upload.url, true);
+
+    xhr.upload.onprogress = function (event) {
+      if (!event.lengthComputable) return;
+      onProgress === null || onProgress === void 0 ? void 0 : onProgress(Math.round(event.loaded / event.total * 100));
+    };
+
+    xhr.onload = function () {
+      var _$exec;
+
+      // 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.
+      */
+
+
+      var code = (_$exec = /<Code>(.*?)<\/Code>/.exec(xhr.responseText)) === null || _$exec === void 0 ? void 0 : _$exec[1]; // El código técnico va a la consola; al usuario, algo que pueda hacer.
+
+      console.error("Activos digitales: S3 rechazó la subida", code || xhr.status, xhr.responseText);
+
+      if (code === "EntityTooLarge") {
+        reject(new Error("El archivo supera el tamaño permitido."));
+      } else if (code === "AccessDenied") {
+        reject(new Error("No se pudo subir el archivo. Avisa a soporte (permiso de almacenamiento)."));
+      } else {
+        reject(new Error("No se pudo subir el archivo (".concat(code || xhr.status, "). Int\xE9ntalo de nuevo; si sigue fallando, avisa a soporte.")));
+      }
+    };
+
+    xhr.onerror = function () {
+      // Un fallo de red sin estatus casi siempre es CORS (el bucket tiene que
+      // permitir POST desde el origen de la aplicación) o una conexión caída. El
+      // navegador corta la petición y no deja rastro en ningún log del servidor.
+      console.error("Activos digitales: no hubo respuesta de S3 (red o CORS del bucket)");
+      reject(new Error("No se pudo conectar para subir el archivo. Revisa tu conexión e inténtalo de nuevo."));
+    };
+
+    xhr.onabort = function () {
+      return reject(new Error("Subida cancelada."));
+    };
+
+    xhr.send(form);
+  });
+};
+
+exports.uploadToS3 = uploadToS3;