From eea9d14749e71e653d5512fc94479bdb4fb08e7f Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Wed, 7 Oct 2020 15:10:39 -0400
Subject: [PATCH] ensures modals have proper Z index, allows Upload field to
 handle deleted files gracefully

---
 .../components/forms/field-types/Upload/index.js    | 13 ++++++++++---
 src/client/scss/app.scss                            |  5 +++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/client/components/forms/field-types/Upload/index.js b/src/client/components/forms/field-types/Upload/index.js
index a5b846c3e7..c2660f8c9b 100644
--- a/src/client/components/forms/field-types/Upload/index.js
+++ b/src/client/components/forms/field-types/Upload/index.js
@@ -19,6 +19,7 @@ const baseClass = 'upload';
 const Upload = (props) => {
   const { toggle } = useModal();
   const [internalValue, setInternalValue] = useState(undefined);
+  const [missingFile, setMissingFile] = useState(false);
   const { collections, serverURL, routes: { api } } = useConfig();
 
   const {
@@ -75,12 +76,16 @@ const Upload = (props) => {
         if (response.ok) {
           const json = await response.json();
           setInternalValue(json);
+        } else {
+          setInternalValue(undefined);
+          setValue(null);
+          setMissingFile(true);
         }
       };
 
       fetchFile();
     }
-  }, [value, setInternalValue, relationTo, api, serverURL]);
+  }, [value, setInternalValue, relationTo, api, serverURL, setValue]);
 
   return (
     <div
@@ -101,7 +106,7 @@ const Upload = (props) => {
       />
       {collection?.upload && (
         <React.Fragment>
-          {internalValue && (
+          {(internalValue && !missingFile) && (
             <FileDetails
               {...collection.upload}
               {...internalValue}
@@ -111,7 +116,7 @@ const Upload = (props) => {
               }}
             />
           )}
-          {!value && (
+          {(!value || missingFile) && (
             <div className={`${baseClass}__wrap`}>
               <Button
                 buttonStyle="secondary"
@@ -138,6 +143,7 @@ const Upload = (props) => {
             slug: addModalSlug,
             fieldTypes,
             setValue: (val) => {
+              setMissingFile(false);
               setValue(val.id);
               setInternalValue(val);
             },
@@ -147,6 +153,7 @@ const Upload = (props) => {
             collection,
             slug: selectExistingModalSlug,
             setValue: (val) => {
+              setMissingFile(false);
               setValue(val.id);
               setInternalValue(val);
             },
diff --git a/src/client/scss/app.scss b/src/client/scss/app.scss
index c27ce44204..e691aacbec 100644
--- a/src/client/scss/app.scss
+++ b/src/client/scss/app.scss
@@ -114,3 +114,8 @@ dialog {
   border: 0;
   padding: 0;
 }
+
+.payload__modal-item--enter,
+.payload__modal-item--enterDone {
+  z-index: $z-modal;
+}