recibir la imagen en la api corectamente

apps/web/lib/fetch.api.ts

@@ -6,9 +6,7 @@ import { z } from 'zod';
 // Crear instancia de Axios con la URL base validada
 const fetchApi = axios.create({
   baseURL: env.API_URL, // Aquí usamos env.API_URL en vez de process.env.BACKEND_URL
-  headers: {
-    'Content-Type': 'application/json',
-  },
+  // No establecer Content-Type aquí. Axios lo manejará automáticamente con FormData.
 });
 
 // Interceptor para incluir el token automáticamente en las peticiones
@@ -22,6 +20,16 @@ fetchApi.interceptors.request.use(async (config: any) => {
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
+    
+    // **Importante:** Si el body es FormData, elimina el Content-Type para que Axios lo configure automáticamente.
+    // Esto es necesario porque 'multipart/form-data' requiere un 'boundary' que Axios añade.
+    if (config.data instanceof FormData) {
+      delete config.headers['Content-Type'];
+    } else {
+      // Para otros tipos de datos, asegura que el Content-Type sea 'application/json'
+      config.headers['Content-Type'] = 'application/json';
+    }
+
   } catch (error) {
     console.error('Error getting auth token:', error);
   }
@@ -33,22 +41,25 @@ fetchApi.interceptors.request.use(async (config: any) => {
  * Función para hacer peticiones con validación de respuesta
  * @param schema - Esquema de Zod para validar la respuesta
  * @param url - Endpoint a consultar
- * @param config - Configuración opcional de Axios
+ * @param method - Método HTTP (GET, POST, PUT, PATCH, DELETE)
+ * @param data - Datos a enviar (puede ser un objeto JSON o FormData para archivos)
  * @returns [error, data] -> Devuelve el error como objeto estructurado si hay fallo, o los datos validados
  */
 export const safeFetchApi = async <T extends z.ZodSchema<any>>(
   schema: T,
   url: string,
   method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' = 'GET',
-  body?: any,
+  data?: any, // Renombrado a 'data' para mayor claridad y consistencia con Axios
 ): Promise<
   [{ type: string; message: string; details?: any } | null, z.infer<T> | null]
 > => {
   try {
+    console.log(url,method,data);
+    
     const response = await fetchApi({
       method,
       url,
-      data: body,
+      data, // Axios usa 'data' para el body de POST/PUT/PATCH
     });
 
     const parsed = schema.safeParse(response.data);
@@ -60,7 +71,6 @@ export const safeFetchApi = async <T extends z.ZodSchema<any>>(
         expectedSchema: schema,
         data: response.data.data,
       });
-      // console.error(parsed.error.errors)
       return [
         {
           type: 'VALIDATION_ERROR',
@@ -84,7 +94,6 @@ export const safeFetchApi = async <T extends z.ZodSchema<any>>(
       headers: error.config?.headers,
     };
 
-    // console.log(error)
     return [
       {
         type: 'API_ERROR',

apps/web/lib/fetch.api2.ts

@@ -0,0 +1,99 @@
+'use server';
+import { env } from '@/lib/env'; // Importamos la configuración de entorno validada
+import axios from 'axios';
+import { z } from 'zod';
+
+// Crear instancia de Axios con la URL base validada
+const fetchApi = axios.create({
+  baseURL: env.API_URL, // Aquí usamos env.API_URL en vez de process.env.BACKEND_URL
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Interceptor para incluir el token automáticamente en las peticiones
+fetchApi.interceptors.request.use(async (config: any) => {
+  try {
+    // Importación dinámica para evitar la referencia circular
+    const { auth } = await import('@/lib/auth');
+    const session = await auth();
+    const token = session?.access_token;
+
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+  } catch (error) {
+    console.error('Error getting auth token:', error);
+  }
+
+  return config;
+});
+
+/**
+ * Función para hacer peticiones con validación de respuesta
+ * @param schema - Esquema de Zod para validar la respuesta
+ * @param url - Endpoint a consultar
+ * @param config - Configuración opcional de Axios
+ * @returns [error, data] -> Devuelve el error como objeto estructurado si hay fallo, o los datos validados
+ */
+export const safeFetchApi = async <T extends z.ZodSchema<any>>(
+  schema: T,
+  url: string,
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' = 'GET',
+  body?: any,
+): Promise<
+  [{ type: string; message: string; details?: any } | null, z.infer<T> | null]
+> => {
+  try {
+    const response = await fetchApi({
+      method,
+      url,
+      data: body,
+    });
+
+    const parsed = schema.safeParse(response.data);
+
+    if (!parsed.success) {
+      console.error('Validation Error Details:', {
+        errors: parsed.error.errors,
+        receivedData: response.data,
+        expectedSchema: schema,
+        data: response.data.data,
+      });
+      // console.error(parsed.error.errors)
+      return [
+        {
+          type: 'VALIDATION_ERROR',
+          message: 'Validation error',
+          details: parsed.error.errors,
+        },
+        null,
+      ];
+    }
+
+    return [null, parsed.data];
+  } catch (error: any) {
+    const errorDetails = {
+      status: error.response?.status,
+      statusText: error.response?.statusText,
+      message: error.message,
+      url: error.config?.url,
+      method: error.config?.method,
+      requestData: error.config?.data,
+      responseData: error.response?.data,
+      headers: error.config?.headers,
+    };
+
+    // console.log(error)
+    return [
+      {
+        type: 'API_ERROR',
+        message: error.response?.data?.message || 'Unknown API error',
+        details: errorDetails,
+      },
+      null,
+    ];
+  }
+};
+
+export { fetchApi };