Merge pull request #7 from Dada1981/ai-changes
Added image picker and upload function
This commit is contained in:
Dada1981
GitHub
commit
ecf8867b37
1 changed files with 401 additions and 0 deletions
401
src/components/ImagePicker.tsx
Normal file
401
src/components/ImagePicker.tsx
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Upload, Image as ImageIcon, Link as LinkIcon, X, Check, Loader2, FolderOpen, AlertCircle } from "lucide-react";
|
||||
|
||||
interface ImagePickerProps {
|
||||
value: string;
|
||||
onChange: (url: string) => void;
|
||||
token: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface ServerFile {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default function ImagePicker({ value, onChange, token, label }: ImagePickerProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<"upload" | "server" | "url">("upload");
|
||||
const [manualUrl, setManualUrl] = useState(value || "");
|
||||
const [serverFiles, setServerFiles] = useState<ServerFile[]>([]);
|
||||
const [loadingFiles, setLoadingFiles] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Fetch server uploads when the "server" tab is selected
|
||||
useEffect(() => {
|
||||
if (isOpen && activeTab === "server") {
|
||||
fetchServerFiles();
|
||||
}
|
||||
}, [isOpen, activeTab]);
|
||||
|
||||
// Sync state if external value changes
|
||||
useEffect(() => {
|
||||
setManualUrl(value || "");
|
||||
}, [value]);
|
||||
|
||||
const fetchServerFiles = async () => {
|
||||
setLoadingFiles(true);
|
||||
setError("");
|
||||
try {
|
||||
const response = await fetch("/api/admin/list-uploads", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Fehler beim Laden der Serverdateien");
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
setServerFiles(data.files || []);
|
||||
} else {
|
||||
setError(data.error || "Laden der Dateien fehlgeschlagen.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError("Verbindung zum Server fehlgeschlagen.");
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoadingFiles(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileUpload = async (file: File) => {
|
||||
if (!file) return;
|
||||
if (!file.type.startsWith("image/")) {
|
||||
setError("Bitte wählen Sie nur Bilddateien (PNG, JPG, WebP, etc.) aus.");
|
||||
return;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
// Read file as base64
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = async () => {
|
||||
const base64Data = reader.result as string;
|
||||
try {
|
||||
const response = await fetch("/api/admin/upload-file", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
fileName: file.name,
|
||||
base64Data: base64Data,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Serverfehler beim Upload.");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
onChange(data.url);
|
||||
setIsOpen(false);
|
||||
} else {
|
||||
setError(data.error || "Upload fehlgeschlagen.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError("Upload-Fehler: " + err.message);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
setError("Fehler beim Lesen der lokalen Datei.");
|
||||
setUploading(false);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
} catch (err: any) {
|
||||
setError("Ein unerwarteter Fehler ist aufgetreten.");
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrag = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.type === "dragenter" || e.type === "dragover") {
|
||||
setDragActive(true);
|
||||
} else if (e.type === "dragleave") {
|
||||
setDragActive(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragActive(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||||
handleFileUpload(e.dataTransfer.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
handleFileUpload(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const applyManualUrl = () => {
|
||||
onChange(manualUrl);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const handleSelectServerFile = (url: string) => {
|
||||
onChange(url);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Preview thumbnail */}
|
||||
<div className="w-12 h-12 rounded-xl border border-slate-800 bg-slate-950 overflow-hidden flex items-center justify-center shrink-0">
|
||||
{value ? (
|
||||
<img
|
||||
src={value}
|
||||
alt="Vorschau"
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
onError={(e) => {
|
||||
// If local image or external URL fails, display placeholder icon
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ImageIcon className="w-5 h-5 text-slate-600" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Text Input displaying URL + Button to trigger modal */}
|
||||
<div className="flex-1 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={value || "Kein Bild ausgewählt"}
|
||||
className="flex-1 px-3 py-2 bg-slate-950 border border-slate-850 rounded-xl text-slate-300 text-xs truncate focus:outline-none"
|
||||
placeholder="Kein Bild ausgewählt"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="px-3 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold rounded-xl transition-all flex items-center gap-1.5 cursor-pointer shrink-0"
|
||||
>
|
||||
<FolderOpen className="w-3.5 h-3.5" />
|
||||
<span>Auswählen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal overlay */}
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 animate-fade-in">
|
||||
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl flex flex-col max-h-[85vh] overflow-hidden">
|
||||
|
||||
{/* Modal Header */}
|
||||
<div className="p-4 border-b border-slate-800 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider font-mono">
|
||||
{label || "Bild auswählen"}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Lokal hochladen, vom Server wählen oder Web-URL eintragen.</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-1.5 hover:bg-slate-850 rounded-lg text-slate-400 hover:text-white transition-all"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Tabs */}
|
||||
<div className="flex border-b border-slate-800 bg-slate-950/40">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("upload")}
|
||||
className={`flex-1 py-3 text-xs font-semibold border-b-2 transition-all flex items-center justify-center gap-2 ${
|
||||
activeTab === "upload"
|
||||
? "border-indigo-500 text-white bg-slate-900/30"
|
||||
: "border-transparent text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
<span>Hochladen</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("server")}
|
||||
className={`flex-1 py-3 text-xs font-semibold border-b-2 transition-all flex items-center justify-center gap-2 ${
|
||||
activeTab === "server"
|
||||
? "border-indigo-500 text-white bg-slate-900/30"
|
||||
: "border-transparent text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
<ImageIcon className="w-3.5 h-3.5" />
|
||||
<span>Server-Mediathek</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("url")}
|
||||
className={`flex-1 py-3 text-xs font-semibold border-b-2 transition-all flex items-center justify-center gap-2 ${
|
||||
activeTab === "url"
|
||||
? "border-indigo-500 text-white bg-slate-900/30"
|
||||
: "border-transparent text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
<LinkIcon className="w-3.5 h-3.5" />
|
||||
<span>Internet-URL</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="p-5 flex-1 overflow-y-auto min-h-[250px]">
|
||||
|
||||
{/* ERROR DISPLAY */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-rose-950/50 border border-rose-900/40 text-rose-300 rounded-xl text-xs flex items-start gap-2">
|
||||
<AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 1: UPLOAD LOCAL FILE */}
|
||||
{activeTab === "upload" && (
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
onDragEnter={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`border-2 border-dashed rounded-xl p-8 flex flex-col items-center justify-center text-center cursor-pointer transition-all ${
|
||||
dragActive
|
||||
? "border-indigo-500 bg-indigo-950/10"
|
||||
: "border-slate-800 hover:border-slate-700 bg-slate-950/20"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{uploading ? (
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<Loader2 className="w-8 h-8 text-indigo-400 animate-spin" />
|
||||
<p className="text-xs text-slate-300 font-mono">Übertrage Datei zum Server...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 bg-slate-900 border border-slate-800 rounded-full w-fit mx-auto text-slate-400">
|
||||
<Upload className="w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-xs font-bold text-white">Bilddatei hierher ziehen oder anklicken</p>
|
||||
<p className="text-[11px] text-slate-550 text-slate-500">Unterstützt JPG, PNG, GIF, WebP (max. 10MB)</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 2: CHOOSE FROM SERVER FILES */}
|
||||
{activeTab === "server" && (
|
||||
<div className="space-y-4">
|
||||
{loadingFiles ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 space-y-2">
|
||||
<Loader2 className="w-6 h-6 text-indigo-400 animate-spin" />
|
||||
<p className="text-xs text-slate-400 font-mono">Durchsuche Server-Speicher...</p>
|
||||
</div>
|
||||
) : serverFiles.length === 0 ? (
|
||||
<div className="text-center py-10 space-y-2">
|
||||
<ImageIcon className="w-8 h-8 text-slate-600 mx-auto" />
|
||||
<p className="text-xs text-slate-400 font-mono">Noch keine Dateien auf dem Server hochgeladen.</p>
|
||||
<p className="text-[11px] text-slate-500">Nutzen Sie den "Hochladen"-Tab, um ein neues Bild hinzuzufügen.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{serverFiles.map((file) => {
|
||||
const isSelected = value === file.url;
|
||||
return (
|
||||
<button
|
||||
key={file.name}
|
||||
type="button"
|
||||
onClick={() => handleSelectServerFile(file.url)}
|
||||
className={`group relative aspect-square rounded-xl overflow-hidden border bg-slate-950 text-left transition-all ${
|
||||
isSelected
|
||||
? "border-indigo-500 ring-2 ring-indigo-500/20"
|
||||
: "border-slate-800 hover:border-slate-700"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={file.url}
|
||||
alt={file.name}
|
||||
className="w-full h-full object-cover transition-transform group-hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
{/* Overlay filename on hover */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-2 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<p className="text-[9px] text-slate-200 truncate font-mono">{file.name}</p>
|
||||
</div>
|
||||
{/* Checkmark icon if selected */}
|
||||
{isSelected && (
|
||||
<div className="absolute top-1.5 right-1.5 p-0.5 bg-indigo-600 text-white rounded-full">
|
||||
<Check className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 3: PASTE INTERNET URL */}
|
||||
{activeTab === "url" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-mono text-slate-400 uppercase">Bild-URL aus dem Internet</label>
|
||||
<input
|
||||
type="url"
|
||||
value={manualUrl}
|
||||
onChange={(e) => setManualUrl(e.target.value)}
|
||||
placeholder="https://example.com/bild.jpg"
|
||||
className="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-white outline-none focus:border-indigo-500 text-xs font-mono"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">Sie können jede direkte Bild-URL eines Drittanbieters eintragen.</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={applyManualUrl}
|
||||
className="w-full py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-1.5"
|
||||
>
|
||||
<Check className="w-4 h-4" />
|
||||
<span>URL übernehmen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue