diff --git a/src/lib/components/RecipeEditor.svelte b/src/lib/components/RecipeEditor.svelte
index 8e66cda..9d63ab4 100644
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -134,14 +134,20 @@
 </script>
 
 <div class="editor">
-  <section class="block">
-    <h2>Bild</h2>
-    <ImageUploadBox
-      recipeId={recipe.id!}
-      imagePath={recipe.image_path}
-      onchange={(p) => onimagechange?.(p)}
-    />
-  </section>
+  {#if recipe.id !== null}
+    <section class="block">
+      <h2>Bild</h2>
+      <ImageUploadBox
+        recipeId={recipe.id}
+        imagePath={recipe.image_path}
+        onchange={(p) => onimagechange?.(p)}
+      />
+    </section>
+  {:else}
+    <section class="block info">
+      <p class="hint">Bild kannst du nach dem Speichern hinzufügen.</p>
+    </section>
+  {/if}
 
   <div class="meta">
     <label class="field">
@@ -271,6 +277,15 @@
     margin: 0 0 0.75rem;
     color: #2b6a3d;
   }
+  .block.info {
+    background: #f6faf7;
+    border: 1px dashed #cfd9d1;
+  }
+  .hint {
+    color: #666;
+    margin: 0;
+    font-size: 0.9rem;
+  }
   .ing-list {
     list-style: none;
     padding: 0;
diff --git a/tests/integration/extract-from-photo.test.ts b/tests/integration/extract-from-photo.test.ts
index ffeeec4..68c0388 100644
--- a/tests/integration/extract-from-photo.test.ts
+++ b/tests/integration/extract-from-photo.test.ts
@@ -57,7 +57,7 @@ describe('POST /api/recipes/extract-from-photo', () => {
   it('happy path: 200 with recipe shape', async () => {
     mockExtract.mockResolvedValueOnce(validAiResponse);
     const fd = new FormData();
-    fd.append('photo', new Blob([await makeJpeg()], { type: 'image/jpeg' }), 'x.jpg');
+    fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }), 'x.jpg');
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const res = await POST(mkEvent(fd) as any);
     expect(res.status).toBe(200);
@@ -73,7 +73,7 @@ describe('POST /api/recipes/extract-from-photo', () => {
   it('413 when file exceeds 8 MB', async () => {
     const big = Buffer.alloc(9 * 1024 * 1024);
     const fd = new FormData();
-    fd.append('photo', new Blob([big], { type: 'image/jpeg' }));
+    fd.append('photo', new Blob([new Uint8Array(big)], { type: 'image/jpeg' }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const res = await POST(mkEvent(fd, '1.1.1.1') as any);
     expect(res.status).toBe(413);
@@ -82,7 +82,7 @@ describe('POST /api/recipes/extract-from-photo', () => {
 
   it('415 when content-type not in whitelist', async () => {
     const fd = new FormData();
-    fd.append('photo', new Blob([Buffer.from('hi')], { type: 'text/plain' }));
+    fd.append('photo', new Blob([new Uint8Array(Buffer.from('hi'))], { type: 'text/plain' }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const res = await POST(mkEvent(fd, '2.2.2.2') as any);
     expect(res.status).toBe(415);
@@ -103,7 +103,7 @@ describe('POST /api/recipes/extract-from-photo', () => {
       steps: []
     });
     const fd = new FormData();
-    fd.append('photo', new Blob([await makeJpeg()], { type: 'image/jpeg' }));
+    fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const res = await POST(mkEvent(fd, '4.4.4.4') as any);
     expect(res.status).toBe(422);
@@ -115,7 +115,7 @@ describe('POST /api/recipes/extract-from-photo', () => {
       new GeminiError('AI_NOT_CONFIGURED', 'no key')
     );
     const fd = new FormData();
-    fd.append('photo', new Blob([await makeJpeg()], { type: 'image/jpeg' }));
+    fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const res = await POST(mkEvent(fd, '5.5.5.5') as any);
     expect(res.status).toBe(503);
@@ -127,12 +127,12 @@ describe('POST /api/recipes/extract-from-photo', () => {
     const ip = '9.9.9.9';
     for (let i = 0; i < 10; i++) {
       const fd = new FormData();
-      fd.append('photo', new Blob([await makeJpeg()], { type: 'image/jpeg' }));
+      fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       await POST(mkEvent(fd, ip) as any);
     }
     const last = new FormData();
-    last.append('photo', new Blob([await makeJpeg()], { type: 'image/jpeg' }));
+    last.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const res = await POST(mkEvent(last, ip) as any);
     expect(res.status).toBe(429);