MVP
This commit is contained in:
Marcelo
159
components/teacher/FileUpload.tsx
Normal file
159
components/teacher/FileUpload.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { createBrowserClient } from "@supabase/ssr";
|
||||
import { toast } from "sonner";
|
||||
import { FileDown, Upload, X, Loader2 } from "lucide-react";
|
||||
|
||||
interface FileUploadProps {
|
||||
lessonId: string;
|
||||
currentFileUrl?: string | null;
|
||||
onUploadComplete: (url: string) => void;
|
||||
onRemove?: () => void;
|
||||
accept?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const ALLOWED_MIMES = [
|
||||
"application/pdf",
|
||||
"application/msword",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
||||
"text/plain"
|
||||
].join(",");
|
||||
|
||||
export default function FileUpload({
|
||||
lessonId,
|
||||
currentFileUrl,
|
||||
onUploadComplete,
|
||||
onRemove,
|
||||
accept = ALLOWED_MIMES,
|
||||
label = "Documento / Material"
|
||||
}: FileUploadProps) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
|
||||
const supabase = createBrowserClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
);
|
||||
|
||||
// 1. Verify session
|
||||
const { data: { user }, error: authError } = await supabase.auth.getUser();
|
||||
if (authError || !user) {
|
||||
toast.error("Error de autenticación: Por favor inicia sesión de nuevo.");
|
||||
setUploading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Create a unique file path: lesson_id/timestamp_filename
|
||||
const filePath = `${lessonId}/${Date.now()}_${file.name.replace(/\s+/g, '_')}`;
|
||||
|
||||
// 3. Upload to Supabase Storage (assets bucket)
|
||||
const { error } = await supabase.storage
|
||||
.from("assets")
|
||||
.upload(filePath, file, {
|
||||
upsert: true,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error("Storage upload error:", error);
|
||||
if (error.message.includes("row-level security policy")) {
|
||||
toast.error("Error de permisos: El bucket 'assets' no permite subidas para profesores.");
|
||||
} else {
|
||||
toast.error("Error al subir: " + error.message);
|
||||
}
|
||||
setUploading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. Get Public URL
|
||||
const { data: { publicUrl } } = supabase.storage
|
||||
.from("assets")
|
||||
.getPublicUrl(filePath);
|
||||
|
||||
onUploadComplete(publicUrl);
|
||||
setUploading(false);
|
||||
toast.success("Archivo subido con éxito");
|
||||
};
|
||||
|
||||
const fileName = currentFileUrl ? currentFileUrl.split('/').pop() : "";
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-slate-700">{label}</label>
|
||||
|
||||
{currentFileUrl ? (
|
||||
<div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg bg-white group shadow-sm">
|
||||
<div className="h-10 w-10 bg-slate-100 rounded flex items-center justify-center text-slate-500">
|
||||
<FileDown className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">
|
||||
{decodeURIComponent(fileName || "Archivo adjunto")}
|
||||
</p>
|
||||
<a
|
||||
href={currentFileUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Ver archivo actual
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
|
||||
title="Eliminar archivo"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
<button className="text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded border border-slate-200 hover:bg-slate-200">
|
||||
Cambiar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border-2 border-dashed border-slate-300 rounded-lg p-6 hover:border-black hover:bg-slate-50 transition-all cursor-pointer group">
|
||||
<input
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
||||
/>
|
||||
<div className="flex flex-col items-center justify-center text-center space-y-2">
|
||||
{uploading ? (
|
||||
<Loader2 className="h-8 w-8 text-slate-400 animate-spin" />
|
||||
) : (
|
||||
<Upload className="h-8 w-8 text-slate-400 group-hover:text-black" />
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
{uploading ? "Subiendo archivo..." : "Haz clic o arrastra un archivo aquí"}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
Formatos permitidos: <span className="font-semibold">PDF, Word, PowerPoint o Texto (.txt)</span>
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Máximo 50MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user