135 lines
3.5 KiB
TypeScript
135 lines
3.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { adminApi, UploadResponse, MultiUploadResponse } from '@/services/adminApi';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
|
|
interface UseImageUploadOptions {
|
|
maxSize?: number; // in bytes, default 5MB
|
|
allowedTypes?: string[];
|
|
category?: string;
|
|
}
|
|
|
|
export const useImageUpload = (options: UseImageUploadOptions = {}) => {
|
|
const {
|
|
maxSize = 5 * 1024 * 1024, // 5MB default
|
|
allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'],
|
|
category,
|
|
} = options;
|
|
|
|
const { toast } = useToast();
|
|
const [uploading, setUploading] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
const validateFile = (file: File): string | null => {
|
|
if (!allowedTypes.includes(file.type)) {
|
|
return `Tipo de archivo no permitido. Solo se permiten: ${allowedTypes.join(', ')}`;
|
|
}
|
|
|
|
if (file.size > maxSize) {
|
|
return `El archivo es demasiado grande. Tamaño máximo: ${(maxSize / 1024 / 1024).toFixed(2)}MB`;
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const uploadSingle = async (file: File): Promise<UploadResponse | null> => {
|
|
const error = validateFile(file);
|
|
if (error) {
|
|
toast({
|
|
title: 'Error de validación',
|
|
description: error,
|
|
variant: 'destructive',
|
|
});
|
|
return null;
|
|
}
|
|
|
|
setUploading(true);
|
|
setProgress(0);
|
|
|
|
try {
|
|
// Simulate progress
|
|
const progressInterval = setInterval(() => {
|
|
setProgress((prev) => Math.min(prev + 10, 90));
|
|
}, 200);
|
|
|
|
const response = await adminApi.uploadImage(file, category);
|
|
|
|
clearInterval(progressInterval);
|
|
setProgress(100);
|
|
|
|
toast({
|
|
title: 'Imagen subida',
|
|
description: 'La imagen se ha subido correctamente',
|
|
});
|
|
|
|
return response;
|
|
} catch (error) {
|
|
console.error('Error uploading image:', error);
|
|
toast({
|
|
title: 'Error al subir imagen',
|
|
description: error instanceof Error ? error.message : 'No se pudo subir la imagen',
|
|
variant: 'destructive',
|
|
});
|
|
return null;
|
|
} finally {
|
|
setUploading(false);
|
|
setTimeout(() => setProgress(0), 1000);
|
|
}
|
|
};
|
|
|
|
const uploadMultiple = async (files: File[]): Promise<MultiUploadResponse | null> => {
|
|
// Validate all files first
|
|
for (const file of files) {
|
|
const error = validateFile(file);
|
|
if (error) {
|
|
toast({
|
|
title: 'Error de validación',
|
|
description: `${file.name}: ${error}`,
|
|
variant: 'destructive',
|
|
});
|
|
return null;
|
|
}
|
|
}
|
|
|
|
setUploading(true);
|
|
setProgress(0);
|
|
|
|
try {
|
|
// Simulate progress
|
|
const progressInterval = setInterval(() => {
|
|
setProgress((prev) => Math.min(prev + 10, 90));
|
|
}, 300);
|
|
|
|
const response = await adminApi.uploadImages(files, category);
|
|
|
|
clearInterval(progressInterval);
|
|
setProgress(100);
|
|
|
|
toast({
|
|
title: 'Imágenes subidas',
|
|
description: `${files.length} imagen(es) subida(s) correctamente`,
|
|
});
|
|
|
|
return response;
|
|
} catch (error) {
|
|
console.error('Error uploading images:', error);
|
|
toast({
|
|
title: 'Error al subir imágenes',
|
|
description: error instanceof Error ? error.message : 'No se pudieron subir las imágenes',
|
|
variant: 'destructive',
|
|
});
|
|
return null;
|
|
} finally {
|
|
setUploading(false);
|
|
setTimeout(() => setProgress(0), 1000);
|
|
}
|
|
};
|
|
|
|
return {
|
|
uploadSingle,
|
|
uploadMultiple,
|
|
uploading,
|
|
progress,
|
|
validateFile,
|
|
};
|
|
};
|