New: avatar by file upload (#157)

* New: avatar by file upload

* Format: ok

Author: adrianrrruiz

.github/workflows/dependabot.yml

@@ -7,4 +7,4 @@ updates:
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "monthly"
+      interval: "monthly"

src/app/(auth)/sign-up/actions.tsx

@@ -1,25 +1,14 @@
 "use server";
 
 import { createClient } from "@/lib/supabase/server";
-
-const checkImage = async (url: string) => {
-  let blob_image = null;
-  try {
-    const im = await fetch(url);
-    blob_image = await im.blob();
-  } catch {
-    throw new Error("Image isn't valid");
-  }
-
-  return blob_image.type.startsWith("image/");
-};
+import { uploadAvatar } from "@/lib/supabase/storage";
 
 export async function signup(form_data: FormData) {
-  const name = form_data.get("name").toString();
-  const surname = form_data.get("surname").toString();
-  const email = form_data.get("email").toString();
-  const password = form_data.get("password").toString();
-  const avatar_url = form_data.get("avatar_url")?.toString();
+  const name = form_data.get("name")?.toString();
+  const surname = form_data.get("surname")?.toString();
+  const email = form_data.get("email")?.toString();
+  const password = form_data.get("password")?.toString();
+  const avatarFile = form_data.get("avatar") as File | null;
 
   try {
     if (!name || !surname || !email || !password) {
@@ -30,12 +19,6 @@ export async function signup(form_data: FormData) {
         "El correo electrónico debe ser de la Pontificia Universidad Javeriana.",
       );
     }
-    if (avatar_url) {
-      const validImage = await checkImage(avatar_url);
-      if (!validImage) {
-        throw new Error("El URL del avatar no apunta a una imagen válida.");
-      }
-    }
 
     const supabase = await createClient();
 
@@ -48,12 +31,28 @@ export async function signup(form_data: FormData) {
       throw new Error(error.message);
     }
 
+    if (!data.user?.id) {
+      throw new Error("Error al crear el usuario.");
+    }
+
+    // Subir avatar si se proporcionó
+    let avatarUrl: string | null = null;
+    if (avatarFile && avatarFile.size > 0) {
+      try {
+        avatarUrl = await uploadAvatar(avatarFile, data.user.id);
+      } catch (uploadError) {
+        // Si falla la subida del avatar, continuar sin él
+        console.error("Error al subir avatar:", uploadError);
+        // No lanzamos error aquí para no bloquear el registro
+      }
+    }
+
     const dbResponse = await supabase.from("student").insert([
       {
         name,
         surname,
-        avatar: avatar_url || null,
-        supabase_user_id: data.user?.id,
+        avatar: avatarUrl,
+        supabase_user_id: data.user.id,
       },
     ]);
 

src/app/profile/actions.ts

@@ -0,0 +1,39 @@
+"use server";
+
+import { uploadAvatar, deleteAvatar } from "@/lib/supabase/storage";
+import { getUser } from "@/controllers/supabase.controller";
+
+/**
+ * Server action para subir un avatar desde el cliente
+ */
+export async function uploadAvatarAction(formData: FormData) {
+  try {
+    const file = formData.get("avatar") as File;
+    const user = await getUser();
+
+    if (!user?.id) {
+      return { error: "Usuario no autenticado", url: null };
+    }
+
+    if (!file || file.size === 0) {
+      return { error: "No se proporcionó ningún archivo", url: null };
+    }
+
+    const avatarUrl = await uploadAvatar(file, user.id);
+    return { error: null, url: avatarUrl };
+  } catch (error) {
+    return { error: (error as Error).message, url: null };
+  }
+}
+
+/**
+ * Server action para eliminar un avatar
+ */
+export async function deleteAvatarAction(avatarUrl: string) {
+  try {
+    await deleteAvatar(avatarUrl);
+    return { error: null };
+  } catch (error) {
+    return { error: (error as Error).message };
+  }
+}

src/app/profile/page.tsx

@@ -21,7 +21,7 @@ export default function ProfilePage() {
     isEditing,
     formData,
     handleEditing,
-    handleAvatarUrlChange,
+    handleAvatarFileChange,
     handleSave,
     handleInputChange,
     setFormData,
@@ -49,7 +49,7 @@ export default function ProfilePage() {
               onEditToggle={handleEditing}
               onSave={handleSave}
               onInputChange={handleInputChange}
-              onAvatarUrlChange={handleAvatarUrlChange}
+              onAvatarFileChange={handleAvatarFileChange}
               setFormData={setFormData}
             />
           )}

src/components/profile/profile-header.tsx

@@ -1,6 +1,7 @@
 import { Student } from "@/models/student.model";
 import Link from "next/link";
-import React from "react";
+import React, { useRef } from "react";
+import { Upload, X } from "lucide-react";
 
 interface ProfileHeaderProps {
   student: Student | null;
@@ -12,18 +13,22 @@ interface ProfileHeaderProps {
     email: string;
     codeforcesHandle: string;
     avatarUrl: string | null;
+    avatarFile: File | null;
+    avatarPreview: string | null;
   };
   onEditToggle: () => void;
   onSave: () => void;
   onInputChange: (field: string, value: string) => void;
-  onAvatarUrlChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onAvatarFileChange: (file: File | null, preview: string | null) => void;
   setFormData: React.Dispatch<
     React.SetStateAction<{
       name: string;
       surname: string;
       email: string;
       codeforcesHandle: string;
       avatarUrl: string | null;
+      avatarFile: File | null;
+      avatarPreview: string | null;
     }>
   >;
 }
@@ -36,9 +41,45 @@ export const ProfileHeader = ({
   onEditToggle,
   onSave,
   onInputChange,
-  onAvatarUrlChange,
+  onAvatarFileChange,
   setFormData,
 }: ProfileHeaderProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validar tipo de archivo
+      if (!file.type.startsWith("image/")) {
+        alert("Por favor, selecciona un archivo de imagen válido.");
+        return;
+      }
+      // Validar tamaño (1MB)
+      if (file.size > 5 * 1024 * 1024) {
+        alert("El archivo es demasiado grande. Máximo 1MB.");
+        return;
+      }
+      // Crear preview
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        onAvatarFileChange(file, reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    onAvatarFileChange(null, null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  // Determinar qué imagen mostrar
+  const displayImage =
+    formData.avatarPreview ||
+    (isEditing ? formData.avatarUrl : student?.avatar) ||
+    null;
   return (
     <section className="bg-(--white) dark:bg-gray-800 rounded-xl shadow-sm border border-(--azul-niebla) dark:border-gray-700">
       <div className="p-6 border-b border-(--azul-niebla) dark:border-gray-700 flex items-center justify-start">
@@ -72,17 +113,18 @@ export const ProfileHeader = ({
         {/* Avatar editable */}
         <div className="flex flex-col items-center md:w-1/3">
           <div className="relative w-28 h-28 md:w-32 md:h-32 rounded-full overflow-hidden ring-4 ring-(--azul-niebla) dark:ring-blue-900">
-            {(isEditing ? formData.avatarUrl : student?.avatar) ? (
+            {displayImage ? (
               <img
-                src={
-                  (isEditing ? formData.avatarUrl : student?.avatar) ||
-                  undefined
-                }
+                src={displayImage}
                 alt="Avatar"
                 className="w-full h-full object-cover"
                 onError={() => {
                   if (isEditing) {
-                    setFormData((prev) => ({ ...prev, avatarUrl: null }));
+                    setFormData((prev) => ({
+                      ...prev,
+                      avatarUrl: null,
+                      avatarPreview: null,
+                    }));
                   }
                 }}
               />
@@ -97,17 +139,37 @@ export const ProfileHeader = ({
           {isEditing && (
             <div className="w-full mt-4 space-y-2">
               <input
-                type="url"
-                value={formData.avatarUrl || ""}
-                onChange={onAvatarUrlChange}
-                placeholder="www.example.com/avatar.png"
-                className="w-full px-3 py-2 rounded-lg bg-(--azul-niebla) dark:bg-gray-700 text-(--azul-noche) dark:text-white border border-(--azul-niebla) dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-(--azul-electrico) text-sm"
+                ref={fileInputRef}
+                type="file"
+                accept="image/jpeg,image/jpg,image/png,image/webp"
+                onChange={handleAvatarChange}
+                className="hidden"
+                id="avatar-upload"
               />
-              {formData.avatarUrl && (
-                <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
-                  La imagen se previsualizará arriba
-                </p>
+              <label
+                htmlFor="avatar-upload"
+                className="flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg bg-(--azul-niebla) dark:bg-gray-700 text-(--azul-noche) dark:text-white border border-(--azul-niebla) dark:border-gray-600 hover:bg-(--azul-crayon) dark:hover:bg-gray-600 cursor-pointer transition-colors text-sm font-medium"
+              >
+                <Upload className="h-4 w-4" />
+                <span>
+                  {formData.avatarFile
+                    ? formData.avatarFile.name
+                    : "Seleccionar imagen"}
+                </span>
+              </label>
+              {formData.avatarFile && (
+                <button
+                  type="button"
+                  onClick={handleRemoveAvatar}
+                  className="flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white transition-colors text-sm font-medium"
+                >
+                  <X className="h-4 w-4" />
+                  <span>Eliminar imagen</span>
+                </button>
               )}
+              <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+                Formatos: JPEG, PNG, WEBP. Máximo 1MB
+              </p>
             </div>
           )}
         </div>