deleted forgotten implement files and readme
This commit is contained in:
Matthias
@@ -1,103 +0,0 @@
|
|||||||
# Bild-Upload via Convex Storage — Einbau-Anleitung
|
|
||||||
|
|
||||||
## Konzept
|
|
||||||
|
|
||||||
Der Upload-Flow nutzt Convex File Storage in 3 Schritten:
|
|
||||||
1. **generateUploadUrl** → kurzlebige Upload-URL vom Backend
|
|
||||||
2. **fetch(POST)** → Datei direkt an Convex Storage senden
|
|
||||||
3. **updateData** → `storageId` im Node speichern
|
|
||||||
|
|
||||||
Die **URL wird serverseitig** in der `nodes.list` Query aufgelöst — nicht
|
|
||||||
am Client. Das heißt: der Node speichert nur die `storageId`, und bei
|
|
||||||
jedem Query-Aufruf wird `ctx.storage.getUrl(storageId)` aufgerufen und
|
|
||||||
als `data.url` zurückgegeben.
|
|
||||||
|
|
||||||
## Dateien
|
|
||||||
|
|
||||||
```
|
|
||||||
upload-files/
|
|
||||||
convex/
|
|
||||||
storage.ts → convex/storage.ts (NEU)
|
|
||||||
nodes-list-patch.ts → PATCH für convex/nodes.ts (NUR die list Query ersetzen)
|
|
||||||
components/canvas/nodes/
|
|
||||||
image-node.tsx → ERSETZT alte Version
|
|
||||||
|
|
||||||
Gesamt: 3 Dateien (1 neu, 1 Patch, 1 Ersatz)
|
|
||||||
```
|
|
||||||
|
|
||||||
## Einbau-Schritte
|
|
||||||
|
|
||||||
### 1. `convex/storage.ts` anlegen
|
|
||||||
Kopiere die Datei direkt. Sie enthält eine einzige Mutation: `generateUploadUrl`.
|
|
||||||
|
|
||||||
### 2. `convex/nodes.ts` — `list` Query patchen
|
|
||||||
Ersetze **nur die `list` Query** in deiner bestehenden `convex/nodes.ts`
|
|
||||||
mit der Version aus `nodes-list-patch.ts`. Der Rest der Datei
|
|
||||||
(create, move, resize, etc.) bleibt unverändert.
|
|
||||||
|
|
||||||
Die Änderung: Nach dem `collect()` wird über alle Nodes iteriert.
|
|
||||||
Wenn ein Node `data.storageId` hat, wird `ctx.storage.getUrl()` aufgerufen
|
|
||||||
und das Ergebnis als `data.url` eingefügt.
|
|
||||||
|
|
||||||
**Wichtig:** Du brauchst den `Id` Import oben in der Datei:
|
|
||||||
```ts
|
|
||||||
import type { Doc, Id } from "./_generated/dataModel";
|
|
||||||
```
|
|
||||||
(Du hast `Doc` wahrscheinlich schon importiert — füge `Id` hinzu falls nötig.)
|
|
||||||
|
|
||||||
### 3. `image-node.tsx` ersetzen
|
|
||||||
Die neue Version hat:
|
|
||||||
- **Click-to-Upload**: Klick auf den leeren Node öffnet File-Picker
|
|
||||||
- **Drag & Drop**: Bilder direkt auf den Node ziehen (Files vom OS)
|
|
||||||
- **Ersetzen-Button**: Wenn bereits ein Bild vorhanden, oben rechts "Ersetzen"
|
|
||||||
- **Upload-Spinner**: Während des Uploads dreht sich ein Spinner
|
|
||||||
- **Dateiname**: Wird unter dem Bild angezeigt
|
|
||||||
|
|
||||||
## Upload-Flow im Detail
|
|
||||||
|
|
||||||
```
|
|
||||||
User zieht Bild auf Image-Node
|
|
||||||
│
|
|
||||||
├─ handleDrop() → uploadFile(file)
|
|
||||||
│
|
|
||||||
├─ 1. generateUploadUrl() → Convex Mutation
|
|
||||||
│ ← postUrl (kurzlebig)
|
|
||||||
│
|
|
||||||
├─ 2. fetch(postUrl, { body: file })
|
|
||||||
│ ← { storageId: "kg..." }
|
|
||||||
│
|
|
||||||
├─ 3. updateData({ nodeId, data: { storageId, filename, mimeType } })
|
|
||||||
│ → Convex speichert storageId im Node
|
|
||||||
│
|
|
||||||
└─ 4. nodes.list Query feuert automatisch neu (Realtime)
|
|
||||||
→ ctx.storage.getUrl(storageId) → data.url
|
|
||||||
→ Image-Node rendert das Bild
|
|
||||||
```
|
|
||||||
|
|
||||||
## Testing
|
|
||||||
|
|
||||||
### Test 1: Click-to-Upload
|
|
||||||
- Erstelle einen Image-Node (Sidebar oder Toolbar)
|
|
||||||
- Klicke auf "Klicken oder hierhin ziehen"
|
|
||||||
- ✅ File-Picker öffnet sich
|
|
||||||
- Wähle ein Bild (PNG/JPG/WebP)
|
|
||||||
- ✅ Spinner erscheint kurz, dann wird das Bild angezeigt
|
|
||||||
- ✅ Convex Dashboard: `data.storageId` ist gesetzt
|
|
||||||
|
|
||||||
### Test 2: Drag & Drop (File vom OS)
|
|
||||||
- Ziehe ein Bild aus dem Finder/Explorer direkt auf den Image-Node
|
|
||||||
- ✅ Drop-Zone wird blau hervorgehoben
|
|
||||||
- ✅ Bild wird hochgeladen und angezeigt
|
|
||||||
|
|
||||||
### Test 3: Bild ersetzen
|
|
||||||
- Klicke "Ersetzen" oben rechts am Image-Node
|
|
||||||
- Wähle ein neues Bild
|
|
||||||
- ✅ Altes Bild wird ersetzt, neue storageId in Convex
|
|
||||||
|
|
||||||
### Test 4: URL wird serverseitig aufgelöst
|
|
||||||
- Lade die Seite neu
|
|
||||||
- ✅ Bild wird weiterhin angezeigt (URL wird bei jedem Query neu aufgelöst)
|
|
||||||
|
|
||||||
### Test 5: Nicht-Bild-Dateien werden ignoriert
|
|
||||||
- Versuche eine .txt oder .pdf auf den Node zu ziehen
|
|
||||||
- ✅ Nichts passiert (nur image/* wird akzeptiert)
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useCallback, useRef } from "react";
|
|
||||||
import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
|
|
||||||
import { useMutation } from "convex/react";
|
|
||||||
import { api } from "@/convex/_generated/api";
|
|
||||||
import type { Id } from "@/convex/_generated/dataModel";
|
|
||||||
import BaseNodeWrapper from "./base-node-wrapper";
|
|
||||||
|
|
||||||
type ImageNodeData = {
|
|
||||||
storageId?: string;
|
|
||||||
url?: string;
|
|
||||||
filename?: string;
|
|
||||||
mimeType?: string;
|
|
||||||
_status?: string;
|
|
||||||
_statusMessage?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ImageNode = Node<ImageNodeData, "image">;
|
|
||||||
|
|
||||||
export default function ImageNode({ id, data, selected }: NodeProps<ImageNode>) {
|
|
||||||
const generateUploadUrl = useMutation(api.storage.generateUploadUrl);
|
|
||||||
const updateData = useMutation(api.nodes.updateData);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
|
||||||
const [isDragOver, setIsDragOver] = useState(false);
|
|
||||||
|
|
||||||
const uploadFile = useCallback(
|
|
||||||
async (file: File) => {
|
|
||||||
if (!file.type.startsWith("image/")) return;
|
|
||||||
setIsUploading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. Upload-URL generieren
|
|
||||||
const uploadUrl = await generateUploadUrl();
|
|
||||||
|
|
||||||
// 2. Datei hochladen
|
|
||||||
const result = await fetch(uploadUrl, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": file.type },
|
|
||||||
body: file,
|
|
||||||
});
|
|
||||||
const { storageId } = await result.json();
|
|
||||||
|
|
||||||
// 3. Node-Data mit storageId aktualisieren
|
|
||||||
// Die URL wird serverseitig in der nodes.list Query aufgelöst
|
|
||||||
await updateData({
|
|
||||||
nodeId: id as Id<"nodes">,
|
|
||||||
data: {
|
|
||||||
storageId,
|
|
||||||
filename: file.name,
|
|
||||||
mimeType: file.type,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Upload failed:", err);
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[id, generateUploadUrl, updateData],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Click-to-Upload
|
|
||||||
const handleClick = useCallback(() => {
|
|
||||||
if (!data.url && !isUploading) {
|
|
||||||
fileInputRef.current?.click();
|
|
||||||
}
|
|
||||||
}, [data.url, isUploading]);
|
|
||||||
|
|
||||||
const handleFileChange = useCallback(
|
|
||||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (file) uploadFile(file);
|
|
||||||
},
|
|
||||||
[uploadFile],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Drag & Drop auf den Node
|
|
||||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (e.dataTransfer.types.includes("Files")) {
|
|
||||||
setIsDragOver(true);
|
|
||||||
e.dataTransfer.dropEffect = "copy";
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
setIsDragOver(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDrop = useCallback(
|
|
||||||
(e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
setIsDragOver(false);
|
|
||||||
|
|
||||||
const file = e.dataTransfer.files?.[0];
|
|
||||||
if (file && file.type.startsWith("image/")) {
|
|
||||||
uploadFile(file);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[uploadFile],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Bild ersetzen
|
|
||||||
const handleReplace = useCallback(() => {
|
|
||||||
fileInputRef.current?.click();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseNodeWrapper selected={selected} status={data._status}>
|
|
||||||
<div className="p-2">
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
<div className="text-xs font-medium text-muted-foreground">
|
|
||||||
🖼️ Bild
|
|
||||||
</div>
|
|
||||||
{data.url && (
|
|
||||||
<button
|
|
||||||
onClick={handleReplace}
|
|
||||||
className="nodrag text-xs text-muted-foreground hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
Ersetzen
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isUploading ? (
|
|
||||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-muted">
|
|
||||||
<div className="flex flex-col items-center gap-2">
|
|
||||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
Wird hochgeladen…
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : data.url ? (
|
|
||||||
<img
|
|
||||||
src={data.url}
|
|
||||||
alt={data.filename ?? "Bild"}
|
|
||||||
className="rounded-lg object-cover max-w-[260px]"
|
|
||||||
draggable={false}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
onClick={handleClick}
|
|
||||||
onDragOver={handleDragOver}
|
|
||||||
onDragLeave={handleDragLeave}
|
|
||||||
onDrop={handleDrop}
|
|
||||||
className={`
|
|
||||||
nodrag flex h-36 w-56 cursor-pointer flex-col items-center justify-center
|
|
||||||
rounded-lg border-2 border-dashed text-sm transition-colors
|
|
||||||
${isDragOver ? "border-primary bg-primary/5 text-primary" : "text-muted-foreground hover:border-primary/50 hover:text-foreground"}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
<span className="text-lg mb-1">📁</span>
|
|
||||||
<span>Klicken oder hierhin ziehen</span>
|
|
||||||
<span className="text-xs mt-0.5">PNG, JPG, WebP</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{data.filename && data.url && (
|
|
||||||
<p className="mt-1 text-xs text-muted-foreground truncate max-w-[260px]">
|
|
||||||
{data.filename}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
accept="image/png,image/jpeg,image/webp"
|
|
||||||
onChange={handleFileChange}
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Handle
|
|
||||||
type="source"
|
|
||||||
position={Position.Right}
|
|
||||||
className="!h-3 !w-3 !bg-primary !border-2 !border-background"
|
|
||||||
/>
|
|
||||||
</BaseNodeWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
/**
|
|
||||||
* PATCH für convex/nodes.ts
|
|
||||||
*
|
|
||||||
* Ersetze die bestehende `list` Query mit dieser Version.
|
|
||||||
* Der einzige Unterschied: Für Nodes mit einem `storageId` im data-Objekt
|
|
||||||
* wird die Storage-URL aufgelöst und als `data.url` zurückgegeben.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const list = query({
|
|
||||||
args: { canvasId: v.id("canvases") },
|
|
||||||
handler: async (ctx, { canvasId }) => {
|
|
||||||
const user = await requireAuth(ctx);
|
|
||||||
await getCanvasOrThrow(ctx, canvasId, user.userId);
|
|
||||||
|
|
||||||
const nodes = await ctx.db
|
|
||||||
.query("nodes")
|
|
||||||
.withIndex("by_canvas", (q) => q.eq("canvasId", canvasId))
|
|
||||||
.collect();
|
|
||||||
|
|
||||||
// Storage-URLs für Nodes mit storageId auflösen
|
|
||||||
return Promise.all(
|
|
||||||
nodes.map(async (node) => {
|
|
||||||
const data = node.data as Record<string, unknown> | undefined;
|
|
||||||
if (data?.storageId) {
|
|
||||||
const url = await ctx.storage.getUrl(
|
|
||||||
data.storageId as Id<"_storage">
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
...node,
|
|
||||||
data: { ...data, url: url ?? undefined },
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return node;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { mutation } from "./_generated/server";
|
|
||||||
import { requireAuth } from "./helpers";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generiert eine kurzlebige Upload-URL für Convex File Storage.
|
|
||||||
* Der Client POSTet die Datei direkt an diese URL.
|
|
||||||
*/
|
|
||||||
export const generateUploadUrl = mutation({
|
|
||||||
args: {},
|
|
||||||
handler: async (ctx) => {
|
|
||||||
await requireAuth(ctx);
|
|
||||||
return await ctx.storage.generateUploadUrl();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user