refactor(editor): ImageUploadBox als eigenstaendige Component
Isoliert den Bild-Upload-Flow (File-Input, Preview, Entfernen-Dialog) aus dem RecipeEditor. Parent haelt nur noch den <section>-Wrapper und reicht recipe.id + image_path rein, kriegt Aenderungen per onchange callback zurueck. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
190
src/lib/components/ImageUploadBox.svelte
Normal file
190
src/lib/components/ImageUploadBox.svelte
Normal file
@@ -0,0 +1,190 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { ImagePlus, ImageOff } from 'lucide-svelte';
|
||||
import { confirmAction } from '$lib/client/confirm.svelte';
|
||||
import { asyncFetch } from '$lib/client/api-fetch-wrapper';
|
||||
import { requireOnline } from '$lib/client/require-online';
|
||||
|
||||
type Props = {
|
||||
recipeId: number;
|
||||
imagePath: string | null;
|
||||
onchange: (path: string | null) => void;
|
||||
};
|
||||
|
||||
let { recipeId, imagePath: initial, onchange }: Props = $props();
|
||||
|
||||
let imagePath = $state<string | null>(untrack(() => initial));
|
||||
let uploading = $state(false);
|
||||
let fileInput: HTMLInputElement | null = $state(null);
|
||||
|
||||
const imageSrc = $derived(
|
||||
imagePath === null
|
||||
? null
|
||||
: /^https?:\/\//i.test(imagePath)
|
||||
? imagePath
|
||||
: `/images/${imagePath}`
|
||||
);
|
||||
|
||||
async function onFileChosen(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (!file) return;
|
||||
if (!requireOnline('Der Bild-Upload')) return;
|
||||
uploading = true;
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const res = await asyncFetch(
|
||||
`/api/recipes/${recipeId}/image`,
|
||||
{ method: 'POST', body: fd },
|
||||
'Upload fehlgeschlagen'
|
||||
);
|
||||
if (!res) return;
|
||||
const body = await res.json();
|
||||
imagePath = body.image_path;
|
||||
onchange(imagePath);
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeImage() {
|
||||
if (imagePath === null) return;
|
||||
const ok = await confirmAction({
|
||||
title: 'Bild entfernen?',
|
||||
message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
|
||||
confirmLabel: 'Entfernen',
|
||||
destructive: true
|
||||
});
|
||||
if (!ok) return;
|
||||
if (!requireOnline('Das Entfernen')) return;
|
||||
uploading = true;
|
||||
try {
|
||||
const res = await asyncFetch(
|
||||
`/api/recipes/${recipeId}/image`,
|
||||
{ method: 'DELETE' },
|
||||
'Entfernen fehlgeschlagen'
|
||||
);
|
||||
if (!res) return;
|
||||
imagePath = null;
|
||||
onchange(null);
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="image-row">
|
||||
<div class="image-preview" class:empty={!imageSrc}>
|
||||
{#if imageSrc}
|
||||
<img src={imageSrc} alt="" />
|
||||
{:else}
|
||||
<span class="placeholder">Kein Bild</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="image-actions">
|
||||
<button
|
||||
class="btn"
|
||||
type="button"
|
||||
onclick={() => fileInput?.click()}
|
||||
disabled={uploading}
|
||||
>
|
||||
<ImagePlus size={16} strokeWidth={2} />
|
||||
<span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
|
||||
</button>
|
||||
{#if imagePath}
|
||||
<button class="btn ghost" type="button" onclick={removeImage} disabled={uploading}>
|
||||
<ImageOff size={16} strokeWidth={2} />
|
||||
<span>Entfernen</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if uploading}
|
||||
<span class="upload-status">Lade …</span>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
|
||||
class="file-input"
|
||||
onchange={onFileChosen}
|
||||
/>
|
||||
</div>
|
||||
<p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
|
||||
|
||||
<style>
|
||||
.image-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.image-preview {
|
||||
width: 160px;
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #eef3ef;
|
||||
border: 1px solid #e4eae7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.image-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.image-preview.empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #999;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.image-preview .placeholder {
|
||||
padding: 0 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.image-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.upload-status {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.file-input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-hint {
|
||||
margin: 0.6rem 0 0;
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cfd9d1;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.btn.ghost {
|
||||
color: #666;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: progress;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
|
||||
import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
|
||||
import type { Recipe, Ingredient, Step } from '$lib/types';
|
||||
import { confirmAction } from '$lib/client/confirm.svelte';
|
||||
import { asyncFetch } from '$lib/client/api-fetch-wrapper';
|
||||
import { requireOnline } from '$lib/client/require-online';
|
||||
import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
|
||||
|
||||
type Props = {
|
||||
recipe: Recipe;
|
||||
@@ -27,67 +25,6 @@
|
||||
|
||||
let { recipe, saving = false, onsave, oncancel, onimagechange }: Props = $props();
|
||||
|
||||
let imagePath = $state<string | null>(untrack(() => recipe.image_path));
|
||||
let uploading = $state(false);
|
||||
let fileInput: HTMLInputElement | null = $state(null);
|
||||
|
||||
const imageSrc = $derived(
|
||||
imagePath === null
|
||||
? null
|
||||
: /^https?:\/\//i.test(imagePath)
|
||||
? imagePath
|
||||
: `/images/${imagePath}`
|
||||
);
|
||||
|
||||
async function onFileChosen(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (!file) return;
|
||||
if (!requireOnline('Der Bild-Upload')) return;
|
||||
uploading = true;
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const res = await asyncFetch(
|
||||
`/api/recipes/${recipe.id}/image`,
|
||||
{ method: 'POST', body: fd },
|
||||
'Upload fehlgeschlagen'
|
||||
);
|
||||
if (!res) return;
|
||||
const body = await res.json();
|
||||
imagePath = body.image_path;
|
||||
onimagechange?.(imagePath);
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeImage() {
|
||||
if (imagePath === null) return;
|
||||
const ok = await confirmAction({
|
||||
title: 'Bild entfernen?',
|
||||
message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
|
||||
confirmLabel: 'Entfernen',
|
||||
destructive: true
|
||||
});
|
||||
if (!ok) return;
|
||||
if (!requireOnline('Das Entfernen')) return;
|
||||
uploading = true;
|
||||
try {
|
||||
const res = await asyncFetch(
|
||||
`/api/recipes/${recipe.id}/image`,
|
||||
{ method: 'DELETE' },
|
||||
'Entfernen fehlgeschlagen'
|
||||
);
|
||||
if (!res) return;
|
||||
imagePath = null;
|
||||
onimagechange?.(null);
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Form-lokaler Zustand: Initialwerte aus dem Prop snapshotten (untrack),
|
||||
// damit User-Edits nicht von prop-Updates ueberschrieben werden.
|
||||
let title = $state(untrack(() => recipe.title));
|
||||
@@ -189,50 +126,13 @@
|
||||
</script>
|
||||
|
||||
<div class="editor">
|
||||
<section class="block image-block">
|
||||
<section class="block">
|
||||
<h2>Bild</h2>
|
||||
<div class="image-row">
|
||||
<div class="image-preview" class:empty={!imageSrc}>
|
||||
{#if imageSrc}
|
||||
<img src={imageSrc} alt="" />
|
||||
{:else}
|
||||
<span class="placeholder">Kein Bild</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="image-actions">
|
||||
<button
|
||||
class="btn"
|
||||
type="button"
|
||||
onclick={() => fileInput?.click()}
|
||||
disabled={uploading}
|
||||
>
|
||||
<ImagePlus size={16} strokeWidth={2} />
|
||||
<span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
|
||||
</button>
|
||||
{#if imagePath}
|
||||
<button
|
||||
class="btn ghost"
|
||||
type="button"
|
||||
onclick={removeImage}
|
||||
disabled={uploading}
|
||||
>
|
||||
<ImageOff size={16} strokeWidth={2} />
|
||||
<span>Entfernen</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if uploading}
|
||||
<span class="upload-status">Lade …</span>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
|
||||
class="file-input"
|
||||
onchange={onFileChosen}
|
||||
/>
|
||||
</div>
|
||||
<p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
|
||||
<ImageUploadBox
|
||||
recipeId={recipe.id!}
|
||||
imagePath={recipe.image_path}
|
||||
onchange={(p) => onimagechange?.(p)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div class="meta">
|
||||
@@ -396,67 +296,6 @@
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.image-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.image-preview {
|
||||
width: 160px;
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #eef3ef;
|
||||
border: 1px solid #e4eae7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.image-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.image-preview.empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #999;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.image-preview .placeholder {
|
||||
padding: 0 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.image-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.image-actions .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
min-height: 40px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.upload-status {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.file-input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-hint {
|
||||
margin: 0.6rem 0 0;
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.block h2 {
|
||||
font-size: 1.05rem;
|
||||
margin: 0 0 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user