Integración de Cropper.js con Supabase Storage
Detalle de cómo se puede realizar la integración de Cropper.js con Supabase Storage para subir los ficheros de forma correcta.
Cropper.js es una librería de React común para la gestión de fotos e imágenes usando React. Por otro lado, Supabase es una conocida solución Cloud donde se dispone de base de datos y capacidad de almacenamiento mediante su paquete de «storage».
A modo de resumen, estos son los pasos:
- El primer paso será preparar la imagen de Cropper.js y obtener la parte recordata (cropped). Se convierte a DataURL.
- Se convierte y prepara a base64 la propia imagen.
- Se sube a Supabase indicando el tipo de imagen.
- Se obtienen datos de la imagen subida para su posterior tratamiento.
const handleUpload = async () => {
const folder = "contenidos/";
const cropper = cropperRef.current?.cropper;
if (cropper) {
const cropper2 = cropper?.getCroppedCanvas({ width: width }).toDataURL();
const prepareBase64DataUrl = (base64: string) => base64.replace("data:" + fileType + ";", "data:" + fileType + ";charset=utf-8;").replace(/^.+,/, "");
const dos = Buffer.from(prepareBase64DataUrl(cropper2), "base64");
const randomFileName = uuidv4(); // crea una nombre aleatorio uuid
const extension = fileName?.split(".").pop();
const path = folder + randomFileName + "." + extension;
const res = await uploadFile({ file: dos, path });
}
};
const uploadFile = async ({ file, path }: { file: any; path: any }) => {
const res = await supabase.storage.from("images").upload(path, file, { upsert: true, contentType: fileType });
return res;
};