feat: upload any validated file to the asset library
Activos now supports multi-file/folder upload to private Storage (PDF, Excel, CSV, images, ZIP, etc.) with per-tenant folders. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
313
src/components/AssetsLibrary.tsx
Normal file
313
src/components/AssetsLibrary.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Download,
|
||||
FileText,
|
||||
FolderOpen,
|
||||
Loader2,
|
||||
Trash2,
|
||||
Upload,
|
||||
} from 'lucide-react';
|
||||
|
||||
type Asset = {
|
||||
id: string;
|
||||
title: string;
|
||||
folder?: string;
|
||||
file_name: string;
|
||||
mime_type?: string | null;
|
||||
bytes?: number | null;
|
||||
created_at?: string;
|
||||
};
|
||||
|
||||
function formatBytes(n?: number | null) {
|
||||
if (!n) return '—';
|
||||
if (n < 1024) return `${n} B`;
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
||||
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function iconHint(mime?: string | null) {
|
||||
if (!mime) return 'FILE';
|
||||
if (mime.startsWith('image/')) return 'IMG';
|
||||
if (mime.includes('pdf')) return 'PDF';
|
||||
if (mime.includes('sheet') || mime.includes('csv') || mime.includes('excel'))
|
||||
return 'XLS';
|
||||
if (mime.includes('zip') || mime.includes('rar')) return 'ZIP';
|
||||
return 'FILE';
|
||||
}
|
||||
|
||||
export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string }) {
|
||||
const [assets, setAssets] = useState<Asset[]>([]);
|
||||
const [warning, setWarning] = useState<string | null>(null);
|
||||
const [folder, setFolder] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
const [drag, setDrag] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const res = await fetch('/api/assets');
|
||||
const data = await res.json();
|
||||
setAssets(data.assets || []);
|
||||
setWarning(data.warning || null);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const folders = useMemo(() => {
|
||||
const s = new Set<string>();
|
||||
for (const a of assets) {
|
||||
if (a.folder) s.add(a.folder);
|
||||
}
|
||||
return [...s].sort();
|
||||
}, [assets]);
|
||||
|
||||
const visible = useMemo(() => {
|
||||
if (!folder) return assets;
|
||||
return assets.filter((a) => (a.folder || '') === folder);
|
||||
}, [assets, folder]);
|
||||
|
||||
async function uploadFiles(fileList: FileList | File[]) {
|
||||
const files = [...fileList];
|
||||
if (!files.length) return;
|
||||
setUploading(true);
|
||||
setErr(null);
|
||||
const fd = new FormData();
|
||||
fd.set('folder', folder);
|
||||
for (const f of files) fd.append('files', f);
|
||||
const res = await fetch('/api/assets', { method: 'POST', body: fd });
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setErr(
|
||||
data.error ||
|
||||
(data.errors || []).join(' · ') ||
|
||||
'Error al subir'
|
||||
);
|
||||
} else if (data.errors?.length) {
|
||||
setErr(data.errors.join(' · '));
|
||||
}
|
||||
await load();
|
||||
setUploading(false);
|
||||
}
|
||||
|
||||
async function download(id: string) {
|
||||
const res = await fetch(`/api/assets/download?id=${encodeURIComponent(id)}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok || !data.url) {
|
||||
setErr(data.error || 'No se pudo descargar');
|
||||
return;
|
||||
}
|
||||
window.open(data.url, '_blank', 'noopener,noreferrer');
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
if (!confirm('¿Eliminar este archivo de la biblioteca?')) return;
|
||||
const res = await fetch(`/api/assets?id=${encodeURIComponent(id)}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
setErr(data.error || 'No se pudo borrar');
|
||||
}
|
||||
await load();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight text-white">
|
||||
Biblioteca de activos
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 mt-1 max-w-2xl">
|
||||
Archivo oficial de <strong className="text-gray-300">{tenantLabel}</strong>:
|
||||
sube PDF, Excel, CSV, imágenes, ZIP u otros archivos ya validados.
|
||||
Opcional: carpeta lógica (p. ej. <code>briefs/2026</code>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{warning && (
|
||||
<p className="text-xs text-amber-400 border border-amber-500/20 rounded-lg px-3 py-2">
|
||||
{warning}
|
||||
</p>
|
||||
)}
|
||||
{err && <p className="text-xs text-red-400">{err}</p>}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
|
||||
<div className="flex-1">
|
||||
<label className="text-[11px] uppercase text-gray-500">Carpeta</label>
|
||||
<input
|
||||
className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
|
||||
placeholder="ej. creatividades/meta o vacío = raíz"
|
||||
value={folder}
|
||||
onChange={(e) => setFolder(e.target.value)}
|
||||
list="asset-folders"
|
||||
/>
|
||||
<datalist id="asset-folders">
|
||||
{folders.map((f) => (
|
||||
<option key={f} value={f} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<label className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-medium text-white cursor-pointer">
|
||||
{uploading ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Upload className="w-4 h-4" />
|
||||
)}
|
||||
Subir archivos
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
multiple
|
||||
onChange={(e) => {
|
||||
if (e.target.files) void uploadFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm text-gray-300 hover:text-white cursor-pointer">
|
||||
Subir carpeta
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
multiple
|
||||
// Folder picker (Chromium/Safari)
|
||||
{...{ webkitdirectory: '', directory: '' }}
|
||||
onChange={(e) => {
|
||||
if (e.target.files?.length) {
|
||||
// Use first file relative path as folder hint if empty
|
||||
const rel =
|
||||
(e.target.files[0] as File & { webkitRelativePath?: string })
|
||||
.webkitRelativePath || '';
|
||||
const top = rel.split('/')[0];
|
||||
if (top && !folder) setFolder(top);
|
||||
void uploadFiles(e.target.files);
|
||||
}
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
onDragEnter={(e) => {
|
||||
e.preventDefault();
|
||||
setDrag(true);
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDragLeave={() => setDrag(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setDrag(false);
|
||||
if (e.dataTransfer.files?.length) {
|
||||
void uploadFiles(e.dataTransfer.files);
|
||||
}
|
||||
}}
|
||||
className={`rounded-xl border border-dashed px-6 py-10 text-center transition-colors ${
|
||||
drag
|
||||
? 'border-brand-500 bg-brand-500/10'
|
||||
: 'border-gray-700 bg-[#111827]'
|
||||
}`}
|
||||
>
|
||||
<FolderOpen className="w-8 h-8 text-gray-600 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-300">
|
||||
Arrastra aquí cualquier archivo (máx. 80 MB c/u)
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-500 mt-1">
|
||||
PDF · Excel · CSV · imágenes · ZIP · vídeo · etc.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{folders.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFolder('')}
|
||||
className={`text-[11px] px-2.5 py-1 rounded-md border ${
|
||||
!folder
|
||||
? 'border-brand-500/40 text-brand-400'
|
||||
: 'border-gray-700 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
Todas
|
||||
</button>
|
||||
{folders.map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
type="button"
|
||||
onClick={() => setFolder(f)}
|
||||
className={`text-[11px] px-2.5 py-1 rounded-md border ${
|
||||
folder === f
|
||||
? 'border-brand-500/40 text-brand-400'
|
||||
: 'border-gray-700 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<p className="text-sm text-gray-500">Cargando…</p>
|
||||
) : visible.length === 0 ? (
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
|
||||
<FileText className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-base font-medium text-gray-300">
|
||||
Sin archivos en esta vista
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{visible.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
|
||||
>
|
||||
<span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
|
||||
{iconHint(a.mime_type)}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white font-medium truncate">
|
||||
{a.file_name}
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-500">
|
||||
{a.folder ? `${a.folder}/` : ''}
|
||||
{formatBytes(a.bytes)}
|
||||
{a.created_at
|
||||
? ` · ${new Date(a.created_at).toLocaleString('es-ES')}`
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
<span className="hidden sm:inline-flex items-center gap-1 text-[10px] text-emerald-400">
|
||||
<CheckCircle2 className="w-3 h-3" /> Validado
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => download(a.id)}
|
||||
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
|
||||
title="Descargar"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(a.id)}
|
||||
className="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10"
|
||||
title="Eliminar"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user