+
+
+
+
+
+ Arrastra una imagen aquí
+
+
o usa los botones de abajo
+
+
+
+
+
+
- {{ currentAvatar && currentAvatar.includes('/avatars/') ? 'Cambiar foto' : 'Tomar foto' }}
+ Tomar foto
+
+
+
+
+ Subir desde dispositivo
(null)
// Cookie para persistir cambios del formulario
const formCookie = useCookie>('profile-form-draft', {
@@ -694,6 +734,74 @@ const removeAvatar = async () => {
isUploading.value = false
}
}
+
+// Abrir selector de archivos
+const triggerFileInput = () => {
+ fileInput.value?.click()
+}
+
+// Manejar selección de archivo desde input
+const handleFileSelect = (event: Event) => {
+ const input = event.target as HTMLInputElement
+ const file = input.files?.[0]
+ if (file) {
+ processImageFile(file)
+ }
+ // Limpiar input para permitir seleccionar el mismo archivo de nuevo
+ input.value = ''
+}
+
+// Manejar drag over
+const handleDragOver = (event: DragEvent) => {
+ event.preventDefault()
+ isDragging.value = true
+}
+
+// Manejar drag leave
+const handleDragLeave = () => {
+ isDragging.value = false
+}
+
+// Manejar drop
+const handleDrop = (event: DragEvent) => {
+ event.preventDefault()
+ isDragging.value = false
+
+ const file = event.dataTransfer?.files[0]
+ if (file) {
+ processImageFile(file)
+ }
+}
+
+// Procesar archivo de imagen
+const processImageFile = async (file: File) => {
+ // Validar que sea una imagen
+ if (!file.type.startsWith('image/')) {
+ toast.add({
+ title: 'Archivo inválido',
+ description: 'Por favor selecciona un archivo de imagen',
+ color: 'error',
+ icon: 'i-heroicons-exclamation-triangle'
+ })
+ return
+ }
+
+ // Validar tamaño (máximo 5MB)
+ const maxSize = 5 * 1024 * 1024 // 5MB
+ if (file.size > maxSize) {
+ toast.add({
+ title: 'Archivo muy grande',
+ description: 'La imagen debe ser menor a 5MB',
+ color: 'error',
+ icon: 'i-heroicons-exclamation-triangle'
+ })
+ return
+ }
+
+ // Convertir a Blob y subir
+ const blob = new Blob([file], { type: file.type })
+ await handleAvatarCapture(blob)
+}