From ddd37b7bb52e3341aaa60a6c6b08824a9b80ebfd Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Fri, 26 Jun 2020 12:48:31 -0400
Subject: [PATCH] implements a way to replace files in UI

---
 demo/content-blocks/Quote.js                  | 62 ++++++++++---------
 .../forms/field-types/File/index.js           | 10 +--
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/demo/content-blocks/Quote.js b/demo/content-blocks/Quote.js
index bedf28508d..3b6d2bb6bf 100644
--- a/demo/content-blocks/Quote.js
+++ b/demo/content-blocks/Quote.js
@@ -1,30 +1,36 @@
 module.exports = {
-	slug: 'quote',
-	labels: {
-		singular: 'Quote',
-		plural: 'Quotes',
-	},
-	fields: [
-		{
-			name: 'author',
-			label: 'Author',
-			type: 'text',
-			maxLength: 100,
-			required: true,
-		},
-		{
-			name: 'quote',
-			label: 'Quote',
-			type: 'textarea',
-			height: 100,
-			required: true,
-		},
-		{
-			name: 'color',
-			label: 'Color',
-			type: 'text',
-			maxLength: 7,
-			required: true,
-		},
-	],
+  slug: 'quote',
+  labels: {
+    singular: 'Quote',
+    plural: 'Quotes',
+  },
+  fields: [
+    {
+      name: 'author',
+      label: 'Author',
+      type: 'text',
+      maxLength: 100,
+      required: true,
+    },
+    {
+      name: 'quote',
+      label: 'Quote',
+      type: 'textarea',
+      height: 100,
+      required: true,
+    },
+    {
+      name: 'color',
+      label: 'Color',
+      type: 'text',
+      maxLength: 7,
+      required: true,
+    },
+    {
+      name: 'photo',
+      label: 'Photo',
+      type: 'upload',
+      relationTo: 'media',
+    },
+  ],
 };
diff --git a/src/client/components/forms/field-types/File/index.js b/src/client/components/forms/field-types/File/index.js
index 33327f2113..64ac56ed75 100644
--- a/src/client/components/forms/field-types/File/index.js
+++ b/src/client/components/forms/field-types/File/index.js
@@ -31,7 +31,7 @@ const File = (props) => {
   const [selectingFile, setSelectingFile] = useState(false);
   const [dragging, setDragging] = useState(false);
   const [dragCounter, setDragCounter] = useState(0);
-  const [deletingFile, setDeletingFile] = useState(false);
+  const [replacingFile, setReplacingFile] = useState(false);
 
   const {
     initialData = {}, adminThumbnail, staticURL,
@@ -121,7 +121,7 @@ const File = (props) => {
   }, [fileList]);
 
   useEffect(() => {
-    setDeletingFile(false);
+    setReplacingFile(false);
   }, [initialData]);
 
   const classes = [
@@ -136,19 +136,19 @@ const File = (props) => {
         showError={showError}
         message={errorMessage}
       />
-      {(filename && !deletingFile) && (
+      {(filename && !replacingFile) && (
         <FileDetails
           {...initialData}
           staticURL={staticURL}
           adminThumbnail={adminThumbnail}
           handleRemove={() => {
-            setDeletingFile(true);
+            setReplacingFile(true);
             setFileList(null);
             setValue(null);
           }}
         />
       )}
-      {(!filename || deletingFile) && (
+      {(!filename || replacingFile) && (
         <div className={`${baseClass}__upload`}>
           {value && (
             <div className={`${baseClass}__file-selected`}>