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