fixes bugs with document duplication

src/client/components/elements/DuplicateDocument/index.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import config from 'payload/config';
+import Button from '../Button';
 import useForm from '../../forms/Form/useForm';
 
 import './index.scss';
@@ -11,21 +12,28 @@ const { routes: { admin } } = config;
 const baseClass = 'duplicate';
 
 const Duplicate = ({ slug }) => {
+  const { push } = useHistory();
   const { getData } = useForm();
-  const data = getData();
+
+  const handleClick = useCallback(() => {
+    const data = getData();
+
+    push({
+      pathname: `${admin}/collections/${slug}/create`,
+      state: {
+        data,
+      },
+    });
+  }, [push, getData, slug]);
 
   return (
-    <Link
+    <Button
+      buttonStyle="none"
       className={baseClass}
-      to={{
-        pathname: `${admin}/collections/${slug}/create`,
-        state: {
-          data,
-        },
-      }}
+      onClick={handleClick}
     >
       Duplicate
-    </Link>
+    </Button>
   );
 };
 

src/client/components/forms/field-types/File/index.js

@@ -111,7 +111,7 @@ const File = (props) => {
       };
     }
 
-    return null;
+    return () => { };
   }, [handleDragIn, handleDragOut, handleDrop, dropRef]);
 
   useEffect(() => {

src/client/components/forms/field-types/Relationship/index.js

@@ -336,13 +336,15 @@ const RelationshipFieldType = (props) => {
   useEffect(() => {
     const formatInitialData = (valueToFormat) => {
       if (hasMultipleRelations) {
+        const id = valueToFormat?.value?.id || valueToFormat?.value;
+
         return {
           ...valueToFormat,
-          value: valueToFormat.value.id,
+          value: id,
         };
       }
 
-      return valueToFormat.id;
+      return valueToFormat?.id || valueToFormat;
     };
 
     if (dataToInitialize) {

src/client/components/forms/field-types/Upload/index.js

@@ -14,7 +14,7 @@ import SelectExistingModal from './SelectExisting';
 
 import './index.scss';
 
-const { collections } = config;
+const { collections, serverURL, routes: { api } } = config;
 
 const baseClass = 'upload';
 
@@ -43,10 +43,12 @@ const Upload = (props) => {
   const addModalSlug = `${path}-add`;
   const selectExistingModalSlug = `${path}-select-existing`;
 
+  const dataToInitialize = (typeof initialData === 'object' && initialData.id) ? initialData.id : initialData;
+
   const fieldType = useFieldType({
     path,
     required,
-    initialData: initialData?.id,
+    initialData: dataToInitialize,
     defaultValue,
     validate,
   });
@@ -66,10 +68,23 @@ const Upload = (props) => {
   ].filter(Boolean).join(' ');
 
   useEffect(() => {
-    if (initialData) {
+    if (typeof initialData === 'object' && initialData?.id) {
       setInternalValue(initialData);
     }
-  }, [initialData]);
+
+    if (typeof initialData === 'string') {
+      const fetchFile = async () => {
+        const response = await fetch(`${serverURL}${api}/${relationTo}/${initialData}`);
+
+        if (response.ok) {
+          const json = await response.json();
+          setInternalValue(json);
+        }
+      };
+
+      fetchFile();
+    }
+  }, [initialData, setInternalValue, relationTo]);
 
   return (
     <div
@@ -166,9 +181,12 @@ Upload.propTypes = {
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   defaultValue: PropTypes.string,
-  initialData: PropTypes.shape({
-    id: PropTypes.string,
-  }),
+  initialData: PropTypes.oneOfType([
+    PropTypes.shape({
+      id: PropTypes.string,
+    }),
+    PropTypes.string,
+  ]),
   validate: PropTypes.func,
   width: PropTypes.string,
   style: PropTypes.shape({}),