@zauru-sdk/components 2.0.200 → 2.0.202

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.202](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.201...v2.0.202) (2025-03-20)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [2.0.201](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.200...v2.0.201) (2025-03-20)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.200](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.199...v2.0.200) (2025-03-19)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Form/FileUpload/index.d.ts

@@ -14,6 +14,8 @@ type Props = {
     defaultValue?: string | File;
     download?: boolean;
     required?: boolean;
+    optimizeImages?: boolean;
+    zauruBaseURL?: string;
 };
 export declare const FileUploadField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/Form/FileUpload/index.js

@@ -3,7 +3,7 @@ import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 export const FileUploadField = (props) => {
-    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, } = props;
+    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, optimizeImages = true, zauruBaseURL = "https://zauru.herokuapp.com", } = props;
     const { register: tempRegister, setValue, formState: { errors }, } = useFormContext() || { formState: {} };
     const error = errors ? errors[name] : undefined;
     const register = tempRegister ? tempRegister(name, { required }) : undefined;
@@ -31,26 +31,59 @@ export const FileUploadField = (props) => {
     const borderColor = error ? "border-red-500" : `border-${color}-500`;
     /**
      * Función que se dispara cuando el usuario selecciona un archivo.
-     * Además de actualizar la vista previa, inicia la subida directa a AWS.
+     * Si optimizeImages está activo y se trata de una imagen, la convierte a WebP
+     * usando la librería browser-image-compression.
      */
-    const handleInputChange = (event) => {
-        onChange && onChange(event);
-        setFileDeleted(false);
+    const handleInputChange = async (event) => {
         if (event.target.files && event.target.files.length > 0) {
-            const file = event.target.files[0];
-            // Actualizamos la vista previa para imágenes
-            if (file && file.type.startsWith("image/")) {
+            let file = event.target.files[0];
+            // Si se activa la optimización y es imagen, se convierte a WebP
+            if (file && file.type.startsWith("image/") && optimizeImages) {
+                try {
+                    /*
+                     const options: Options = {
+                       fileType: "image/webp", // Especificamos el formato WebP
+                       initialQuality: 0.7, // Calidad inicial (puedes ajustar este valor)
+                       maxSizeMB: 1, // Tamaño máximo (opcional)
+                       maxWidthOrHeight: 1920, // Dimensión máxima (opcional)
+                       useWebWorker: true,
+                     };
+                    // Después de la compresión, renombramos el archivo:
+                    const compressedFile = await imageCompression(file, options);
+                    const newFile = new File(
+                      [compressedFile],
+                      file.name.replace(/\.[^.]+$/, ".webp"),
+                      {
+                        type: file.type,
+                      }
+                    );
+                    file = newFile;
+                    */
+                    console.log("Archivo convertido:", file.name, file.type);
+                    const objectUrl = URL.createObjectURL(file);
+                    setPreviewSrc(objectUrl);
+                }
+                catch (error) {
+                    console.error("Error al convertir la imagen a WebP:", error);
+                    const objectUrl = URL.createObjectURL(file);
+                    setPreviewSrc(objectUrl);
+                }
+            }
+            else if (file && file.type.startsWith("image/")) {
                 const objectUrl = URL.createObjectURL(file);
                 setPreviewSrc(objectUrl);
             }
             else {
                 setPreviewSrc(null);
             }
+            // Actualizamos el input para que contenga el archivo convertido
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            event.target.files = dataTransfer.files;
             // Importamos dinámicamente DirectUpload solo en el cliente
             import("@rails/activestorage")
                 .then(({ DirectUpload }) => {
-                const uploadUrl = "https://zauru.herokuapp.com/rails/active_storage/direct_uploads";
-                // Inicializamos el progreso y activamos el estado de subida
+                const uploadUrl = `${zauruBaseURL}/api/direct_uploads`;
                 setUploading(true);
                 setUploadProgress(0);
                 const directUpload = new DirectUpload(file, uploadUrl, {
@@ -67,17 +100,36 @@ export const FileUploadField = (props) => {
                     setUploading(false);
                     if (error) {
                         console.error("Error al subir el archivo:", error);
-                        // Manejo de error según tus necesidades
                     }
                     else {
-                        // blob.signed_id es el identificador que debes enviar a tu API
-                        console.log("Archivo subido exitosamente. Blob:", blob);
                         setValue(name, blob.signed_id);
+                        setValue(`${name}_file_type`, blob.content_type);
+                        // Input hidden para el signed_id
+                        const hiddenField = document.createElement("input");
+                        hiddenField.setAttribute("type", "hidden");
+                        hiddenField.setAttribute("value", blob.signed_id);
+                        hiddenField.setAttribute("name", name);
+                        // Input hidden para el content_type
+                        const typeHiddenField = document.createElement("input");
+                        typeHiddenField.setAttribute("type", "hidden");
+                        typeHiddenField.setAttribute("value", blob.content_type);
+                        typeHiddenField.setAttribute("name", `${name}_file_type`);
+                        const formElement = document.querySelector("form");
+                        if (formElement) {
+                            formElement.appendChild(hiddenField);
+                            formElement.appendChild(typeHiddenField);
+                        }
+                        // Removemos el atributo "name" del input file para evitar enviar el archivo
+                        if (fileInputRef.current) {
+                            fileInputRef.current.removeAttribute("name");
+                        }
                     }
                 });
             })
                 .catch((err) => console.error("Error al cargar DirectUpload:", err));
         }
+        onChange && onChange(event);
+        setFileDeleted(false);
     };
     /**
      * Función para eliminar el archivo. Además de limpiar la vista previa,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.200",
+  "version": "2.0.202",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -39,7 +39,8 @@
     "@zauru-sdk/hooks": "^2.0.198",
     "@zauru-sdk/icons": "^2.0.188",
     "@zauru-sdk/types": "^2.0.197",
-    "@zauru-sdk/utils": "^2.0.200",
+    "@zauru-sdk/utils": "^2.0.202",
+    "browser-image-compression": "^2.0.2",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -51,5 +52,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "03df85eff31f6d868ffd76806e59b32e214a821e"
+  "gitHead": "02024107088737551a72e04666cfd3d297547c95"
 }

package/src/Form/FileUpload/index.tsx

@@ -1,6 +1,10 @@
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import React, { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
+/*
+import imageCompression from "browser-image-compression";
+import type { Options } from "browser-image-compression";
+*/
 
 type Props = {
   id?: string;
@@ -17,6 +21,8 @@ type Props = {
   defaultValue?: string | File;
   download?: boolean;
   required?: boolean;
+  optimizeImages?: boolean;
+  zauruBaseURL?: string;
 };
 
 export const FileUploadField = (props: Props) => {
@@ -34,6 +40,8 @@ export const FileUploadField = (props: Props) => {
     defaultValue,
     download = false,
     required = false,
+    optimizeImages = true,
+    zauruBaseURL = "https://zauru.herokuapp.com",
   } = props;
 
   const {
@@ -73,30 +81,62 @@ export const FileUploadField = (props: Props) => {
 
   /**
    * Función que se dispara cuando el usuario selecciona un archivo.
-   * Además de actualizar la vista previa, inicia la subida directa a AWS.
+   * Si optimizeImages está activo y se trata de una imagen, la convierte a WebP
+   * usando la librería browser-image-compression.
    */
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange && onChange(event);
-    setFileDeleted(false);
-
+  const handleInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     if (event.target.files && event.target.files.length > 0) {
-      const file = event.target.files[0];
+      let file = event.target.files[0];
 
-      // Actualizamos la vista previa para imágenes
-      if (file && file.type.startsWith("image/")) {
+      // Si se activa la optimización y es imagen, se convierte a WebP
+      if (file && file.type.startsWith("image/") && optimizeImages) {
+        try {
+          /*
+           const options: Options = {
+             fileType: "image/webp", // Especificamos el formato WebP
+             initialQuality: 0.7, // Calidad inicial (puedes ajustar este valor)
+             maxSizeMB: 1, // Tamaño máximo (opcional)
+             maxWidthOrHeight: 1920, // Dimensión máxima (opcional)
+             useWebWorker: true,
+           };
+          // Después de la compresión, renombramos el archivo:
+          const compressedFile = await imageCompression(file, options);
+          const newFile = new File(
+            [compressedFile],
+            file.name.replace(/\.[^.]+$/, ".webp"),
+            {
+              type: file.type,
+            }
+          );
+          file = newFile;
+          */
+          console.log("Archivo convertido:", file.name, file.type);
+          const objectUrl = URL.createObjectURL(file);
+          setPreviewSrc(objectUrl);
+        } catch (error) {
+          console.error("Error al convertir la imagen a WebP:", error);
+          const objectUrl = URL.createObjectURL(file);
+          setPreviewSrc(objectUrl);
+        }
+      } else if (file && file.type.startsWith("image/")) {
         const objectUrl = URL.createObjectURL(file);
         setPreviewSrc(objectUrl);
       } else {
         setPreviewSrc(null);
       }
 
+      // Actualizamos el input para que contenga el archivo convertido
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+      event.target.files = dataTransfer.files;
+
       // Importamos dinámicamente DirectUpload solo en el cliente
       import("@rails/activestorage")
         .then(({ DirectUpload }) => {
-          const uploadUrl =
-            "https://zauru.herokuapp.com/rails/active_storage/direct_uploads";
+          const uploadUrl = `${zauruBaseURL}/api/direct_uploads`;
 
-          // Inicializamos el progreso y activamos el estado de subida
           setUploading(true);
           setUploadProgress(0);
 
@@ -117,16 +157,39 @@ export const FileUploadField = (props: Props) => {
             setUploading(false);
             if (error) {
               console.error("Error al subir el archivo:", error);
-              // Manejo de error según tus necesidades
             } else {
-              // blob.signed_id es el identificador que debes enviar a tu API
-              console.log("Archivo subido exitosamente. Blob:", blob);
               setValue(name, blob.signed_id);
+              setValue(`${name}_file_type`, blob.content_type);
+
+              // Input hidden para el signed_id
+              const hiddenField = document.createElement("input");
+              hiddenField.setAttribute("type", "hidden");
+              hiddenField.setAttribute("value", blob.signed_id);
+              hiddenField.setAttribute("name", name);
+              // Input hidden para el content_type
+              const typeHiddenField = document.createElement("input");
+              typeHiddenField.setAttribute("type", "hidden");
+              typeHiddenField.setAttribute("value", blob.content_type);
+              typeHiddenField.setAttribute("name", `${name}_file_type`);
+
+              const formElement = document.querySelector("form");
+              if (formElement) {
+                formElement.appendChild(hiddenField);
+                formElement.appendChild(typeHiddenField);
+              }
+
+              // Removemos el atributo "name" del input file para evitar enviar el archivo
+              if (fileInputRef.current) {
+                fileInputRef.current.removeAttribute("name");
+              }
             }
           });
         })
         .catch((err) => console.error("Error al cargar DirectUpload:", err));
     }
+
+    onChange && onChange(event);
+    setFileDeleted(false);
   };
 
   /**