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">
|
<script lang="ts">
|
||||||
import { untrack } from 'svelte';
|
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 type { Recipe, Ingredient, Step } from '$lib/types';
|
||||||
import { confirmAction } from '$lib/client/confirm.svelte';
|
import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
|
||||||
import { asyncFetch } from '$lib/client/api-fetch-wrapper';
|
|
||||||
import { requireOnline } from '$lib/client/require-online';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
recipe: Recipe;
|
recipe: Recipe;
|
||||||
@@ -27,67 +25,6 @@
|
|||||||
|
|
||||||
let { recipe, saving = false, onsave, oncancel, onimagechange }: Props = $props();
|
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),
|
// Form-lokaler Zustand: Initialwerte aus dem Prop snapshotten (untrack),
|
||||||
// damit User-Edits nicht von prop-Updates ueberschrieben werden.
|
// damit User-Edits nicht von prop-Updates ueberschrieben werden.
|
||||||
let title = $state(untrack(() => recipe.title));
|
let title = $state(untrack(() => recipe.title));
|
||||||
@@ -189,50 +126,13 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<section class="block image-block">
|
<section class="block">
|
||||||
<h2>Bild</h2>
|
<h2>Bild</h2>
|
||||||
<div class="image-row">
|
<ImageUploadBox
|
||||||
<div class="image-preview" class:empty={!imageSrc}>
|
recipeId={recipe.id!}
|
||||||
{#if imageSrc}
|
imagePath={recipe.image_path}
|
||||||
<img src={imageSrc} alt="" />
|
onchange={(p) => onimagechange?.(p)}
|
||||||
{: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>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
@@ -396,67 +296,6 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1rem;
|
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 {
|
.block h2 {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user