marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(recipe-form): reject files > 5 MB and show Max. 5 MB hint

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 09:11:57 +02:00
parent 46f2ec45a3
commit 822b34cd14
2 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/lib/recipes/RecipeForm.svelte
View File

@@ -61,10 +61,19 @@
);
let steps = $state(initial?.steps.map((s) => s.instruction) ?? ['']);
let heroImageUrl = $state<string | null>(initial?.heroImageUrl ?? null);
let imageError = $state<string | null>(null);
const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
function handleImageChange(e: Event) {
const file = (e.currentTarget as HTMLInputElement).files?.[0];
if (!file) return;
if (file.size > MAX_IMAGE_BYTES) {
imageError = 'Datei zu groß. Maximal 5 MB erlaubt.';
(e.currentTarget as HTMLInputElement).value = '';
return;
}
imageError = null;
const reader = new FileReader();
reader.onload = () => {
heroImageUrl = reader.result as string;
@@ -196,6 +205,11 @@
/>
{heroImageUrl ? 'Bild ändern' : 'Bild hochladen'}
</label>
{#if imageError}
<p class="mt-[6px] text-[12px] text-[var(--color-error)]">{imageError}</p>
{:else}
<p class="mt-[6px] text-[11px] text-[var(--color-text-muted)]">Max. 5 MB</p>
{/if}
<input type="hidden" name="heroImageUrl" value={heroImageUrl ?? ''} />
</div>

27
frontend/src/lib/recipes/RecipeForm.test.ts
View File

@@ -162,4 +162,31 @@ describe('RecipeForm', () => {
render(RecipeForm, { props: emptyProps });
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
});
it('shows Max. 5 MB hint below upload button', () => {
render(RecipeForm, { props: emptyProps });
expect(screen.getByText('Max. 5 MB')).toBeInTheDocument();
});
it('shows error when selected file exceeds 5 MB', async () => {
const user = userEvent.setup();
render(RecipeForm, { props: emptyProps });
const oversizedFile = new File(['x'.repeat(6 * 1024 * 1024)], 'big.jpg', { type: 'image/jpeg' });
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
await user.upload(fileInput, oversizedFile);
expect(screen.getByText(/datei zu groß/i)).toBeInTheDocument();
});
it('does not show file size error for file within 5 MB', async () => {
const user = userEvent.setup();
render(RecipeForm, { props: emptyProps });
const okFile = new File(['x'.repeat(1 * 1024 * 1024)], 'small.jpg', { type: 'image/jpeg' });
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
await user.upload(fileInput, okFile);
expect(screen.queryByText(/datei zu groß/i)).not.toBeInTheDocument();
});
});