From 487afb7a9188636921e9ac436e39deb5adc538b1 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Mon, 20 Jul 2026 20:18:24 +0100
Subject: [PATCH] Fix: Keep file input in DOM during print area editing

Changed PhotoPrintAreaField to use CSS display:none instead of conditional rendering
to hide the file input when the print area editor is open. This prevents the file
input element from being removed from the DOM, which was causing the selected file
to be lost before form submission.

The issue occurred when:
1. User selected an image file
2. Preview loaded and print area editor opened (showPrintAreaEditor = true)
3. React conditionally removed the file input from the DOM
4. Form submission lost the file data because the input no longer existed

Now the file input stays in the DOM (just hidden), so the file data persists
through form submission.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/admin/products/actions.ts      |  1 +
 src/components/PhotoPrintAreaField.tsx | 86 +++++++++++++-------------
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/src/app/admin/products/actions.ts b/src/app/admin/products/actions.ts
index 8c1bc5b..c2651da 100644
--- a/src/app/admin/products/actions.ts
+++ b/src/app/admin/products/actions.ts
@@ -74,6 +74,7 @@ export async function createProduct(formData: FormData) {
   const sizesInput = String(formData.get('sizes') ?? '');
   const imageFile = formData.get('image') as File | null;
   const imageBackFile = formData.get('imageBack') as File | null;
+
   const photoRecolorable = String(formData.get('photoRecolorable') ?? '') === '1';
   const showOnPersonalised = String(formData.get('showOnPersonalised') ?? '') === '1';
   const showAsPlain = String(formData.get('showAsPlain') ?? '') === '1';
diff --git a/src/components/PhotoPrintAreaField.tsx b/src/components/PhotoPrintAreaField.tsx
index da6f5cc..3293618 100644
--- a/src/components/PhotoPrintAreaField.tsx
+++ b/src/components/PhotoPrintAreaField.tsx
@@ -110,51 +110,49 @@ export default function PhotoPrintAreaField({
         </div>
       )}
 
-      {!currentImageUrl || !showPrintAreaEditor ? (
-        <>
-          <input
-            ref={fileInputRef}
-            id={fieldName}
-            name={fieldName}
-            type="file"
-            accept="image/*"
-            onChange={handleFileChange}
-            className="w-full border border-line bg-paper px-3 py-2 text-sm"
-          />
-          {variant === 'front' ? (
-            <p className="mt-1 text-xs text-muted">
-              Uploading a real photo replaces the illustration everywhere this product is shown. One
-              tradeoff: the color swatches below can no longer recolor a photo the way they recolor the
-              illustration — they&apos;ll still be saved with each order, but the picture itself stays
-              fixed. Leave this blank to keep using the illustration (which does recolor live).
-            </p>
-          ) : (
-            <p className="mt-1 text-xs text-muted">
-              If set, customers get a Front/Back toggle and can add a separate design to the back —
-              drag a print-area box below just like the front.
-            </p>
-          )}
+      <div style={{ display: showPrintAreaEditor && currentImageUrl ? 'none' : 'block' }}>
+        <input
+          ref={fileInputRef}
+          id={fieldName}
+          name={fieldName}
+          type="file"
+          accept="image/*"
+          onChange={handleFileChange}
+          className="w-full border border-line bg-paper px-3 py-2 text-sm"
+        />
+        {variant === 'front' ? (
+          <p className="mt-1 text-xs text-muted">
+            Uploading a real photo replaces the illustration everywhere this product is shown. One
+            tradeoff: the color swatches below can no longer recolor a photo the way they recolor the
+            illustration — they&apos;ll still be saved with each order, but the picture itself stays
+            fixed. Leave this blank to keep using the illustration (which does recolor live).
+          </p>
+        ) : (
+          <p className="mt-1 text-xs text-muted">
+            If set, customers get a Front/Back toggle and can add a separate design to the back —
+            drag a print-area box below just like the front.
+          </p>
+        )}
 
-          {currentImageUrl && !showPrintAreaEditor && (
-            <div className="mt-3 flex gap-2">
-              <button
-                type="button"
-                onClick={() => setShowPrintAreaEditor(true)}
-                className="text-sm text-clay hover:text-clay-dark font-medium"
-              >
-                Modify print area →
-              </button>
-              <button
-                type="button"
-                onClick={handleClearFile}
-                className="text-sm text-splash-pink hover:text-splash-pink-dark font-medium"
-              >
-                Remove
-              </button>
-            </div>
-          )}
-        </>
-      ) : null}
+        {currentImageUrl && !showPrintAreaEditor && (
+          <div className="mt-3 flex gap-2">
+            <button
+              type="button"
+              onClick={() => setShowPrintAreaEditor(true)}
+              className="text-sm text-clay hover:text-clay-dark font-medium"
+            >
+              Modify print area →
+            </button>
+            <button
+              type="button"
+              onClick={handleClearFile}
+              className="text-sm text-splash-pink hover:text-splash-pink-dark font-medium"
+            >
+              Remove
+            </button>
+          </div>
+        )}
+      </div>
 
       {currentImageUrl && showPrintAreaEditor && (
         <div className="mt-4">