From d91c11f5a59da6733f9ca406b682cff746f2ee34 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Fri, 29 Mar 2024 09:48:30 -0700
Subject: [PATCH] Update FrontmatterCustomEditor.tsx

Some weirdness compatibility issues with FileInput. Get it working, then figure out how to correctly migrate to v8
---
 .../frontmatterCustom/FrontmatterCustomEditor.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx b/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx
index 1bb3942..6b99b34 100644
--- a/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx
+++ b/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx
@@ -235,9 +235,12 @@ export const FrontmatterCustomEditor = ({yaml, onChange}: FrontmatterCustomEdito
                     {previewImgFilename && <img id={previewImgFilename} src={fileInputDefaultImage} className={"previewImgFilename"} />}
                     <br/>
                     {previewImgFilename}
-                    <FileInput id={"carousel_image"}
+                    <FileInput
+                              onPointerEnterCapture={undefined}
+                              onPointerLeaveCapture={undefined} id={"carousel_image"}
                                {...register("carousel_image", {required: false})}
                                name={"carousel_image"}
+                               crossOrigin={"use-credentials"}
                                className={"usa-input--2xl usa-input--2xs"}
                                chooseText={"click to upload image"}
                                errorText={errors?.carousel_image?.message}
@@ -247,14 +250,14 @@ export const FrontmatterCustomEditor = ({yaml, onChange}: FrontmatterCustomEdito
                                    const file = e.target.files[0];
                                    const filename = cleanupFilename(file.name);
                                    const newHeaders = new Headers();
-                                   newHeaders.set('Content-Type','image/jpg'); // todo: support png.
+                                   newHeaders.set('Content-Type', 'image/jpg'); // todo: support png.
                                    newHeaders.set('Content-Length', Number(file.size).toString());
-                                   const response = new Response( file.stream(),
-                                     { status: 200, statusText: "ok", headers: newHeaders } );
+                                   const response = new Response(file.stream(),
+                                     {status: 200, statusText: "ok", headers: newHeaders});
                                    void webCache?.put(`/mdedit/img/${filename}`, response.clone());
                                    setValue("carousel_image", filename);
-                                 }}}
-                    />
+                                 }
+                               }}                    />
                   </Fieldset>
 
                   <TextFieldUSWDS id={"carousel_image_alt_text"}