Validacion y restriccion de archivos + almacenamiento en carpeta

This commit is contained in:
2025-08-05 15:07:26 -04:00
parent e18c25e2ee
commit 8a54bf7138
10 changed files with 1613 additions and 74 deletions

View File

@@ -33,12 +33,12 @@ import { z } from 'zod'; // Asegúrate de importar Zod
// Si tu EditInventory original no contempla FileList, crea un esquema para el formulario.
// Ejemplo de cómo podrías adaptar tu esquema para el formulario
const formSchemaWithFiles = editInventory.extend({
urlImg: z.custom<FileList | undefined | null>().optional(), // Ahora permite FileList para el input file
});
// const formSchemaWithFiles = editInventory.extend({
// urlImg: z.custom<FileList | undefined | null>().optional(), // Ahora permite FileList para el input file
// });
// Define un tipo para los datos del formulario que incluye el FileList
type FormDataWithFiles = z.infer<typeof formSchemaWithFiles>;
// type FormDataWithFiles = z.infer<typeof formSchemaWithFiles>;
interface UpdateFormProps {
onSuccess?: () => void;
@@ -59,7 +59,7 @@ export function UpdateForm({
const [sizeFile, setSizeFile] = useState('0 bytes');
const defaultformValues: FormDataWithFiles = { // Usamos el nuevo tipo aquí
const defaultformValues: EditInventory = { // Usamos el nuevo tipo aquí
id: defaultValues?.id,
title: defaultValues?.title || '',
description: defaultValues?.description || '',
@@ -68,21 +68,19 @@ export function UpdateForm({
status: defaultValues?.status || 'BORRADOR',
stock: defaultValues?.stock ?? 0,
urlImg: undefined, // Inicializamos como undefined o null para el FileList
userId: defaultValues?.userId
};
const form = useForm<FormDataWithFiles>({ // Usamos el nuevo tipo aquí
resolver: zodResolver(formSchemaWithFiles), // Usamos el esquema extendido
const form = useForm<EditInventory>({ // Usamos el nuevo tipo aquí
resolver: zodResolver(editInventory), // Usamos el esquema extendido
defaultValues: defaultformValues,
mode: 'onChange',
});
const onSubmit = async (data: FormDataWithFiles) => {
const onSubmit = async (data: EditInventory) => {
// --- MODIFICACIÓN CLAVE: Crear FormData ---
const formData = new FormData();
// Añadir otros campos de texto al FormData
// Asegúrate de que los nombres coincidan con lo que tu backend espera
formData.append('id', data.id ? String(data.id) : ''); // Los IDs a menudo son numéricos, conviértelos a string
formData.append('title', data.title);
formData.append('description', data.description);
@@ -90,7 +88,6 @@ export function UpdateForm({
formData.append('address', data.address);
formData.append('status', data.status);
formData.append('stock', String(data.stock)); // Convertir a string
formData.append('userId', data.userId ? String(data.userId) : '');
// --- MODIFICACIÓN AQUÍ: Asegurar que cada archivo sea un 'File' ---
if (data.urlImg) { // Primero, verifica que FileList no sea null/undefined
@@ -229,7 +226,7 @@ export function UpdateForm({
render={({ field: { onChange, onBlur, name, ref } }) => (
<FormItem>
<FormLabel>Imagen</FormLabel>
<p>Peso máximo: 2MB / {sizeFile}</p>
<p>Peso máximo: 5MB / {sizeFile}</p>
<FormControl>
<Input
type="file"