From 9ce0930a54b7cf237295f8c66e78c5fb3f4834e6 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Mon, 20 Jul 2026 20:31:32 +0100
Subject: [PATCH] Fix: Image upload now properly persists through form
 submission

Changed PhotoPrintAreaField to hide the file input with CSS (display: none)
instead of conditionally removing it from the DOM. This ensures the file
input element remains in the document, preserving the selected file data
when the form is submitted.

Previous issue: When the print area editor opened, React would remove the
file input element from the DOM, causing the file data to be lost before
form submission. This resulted in images not being saved (imageUrl: null).

Result: Images now save correctly to the database as base64 data URLs.
Print area masks are also preserved alongside the images.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/PhotoPrintAreaField.tsx | 88 ++++++++++++++------------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/components/PhotoPrintAreaField.tsx b/src/components/PhotoPrintAreaField.tsx
index 3293618..7f4e11f 100644
--- a/src/components/PhotoPrintAreaField.tsx
+++ b/src/components/PhotoPrintAreaField.tsx
@@ -110,49 +110,53 @@ export default function PhotoPrintAreaField({
         </div>
       )}
 
-      <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>
-        )}
+      <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"
+        style={{ display: showPrintAreaEditor && currentImageUrl ? 'none' : 'block' }}
+      />
 
-        {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 ? (
+        <>
+          {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-4">