payload 0.12.13-beta.0 → 0.13.0

package/CHANGELOG.md

@@ -1,18 +1,21 @@
-## [0.12.13-beta.0](https://github.com/payloadcms/payload/compare/v0.12.3...v0.12.13-beta.0) (2021-11-24)
+# [0.13.0](https://github.com/payloadcms/payload/compare/v0.12.3...v0.13.0) (2021-11-26)
 
 
 ### Bug Fixes
 
 * [#351](https://github.com/payloadcms/payload/issues/351) ([94c2b8d](https://github.com/payloadcms/payload/commit/94c2b8d80b046c067057d4ad089ed6a2edd656cf))
+* [#358](https://github.com/payloadcms/payload/issues/358) - reuploading with existing filenames ([a0fb48c](https://github.com/payloadcms/payload/commit/a0fb48c9a37beceafc6f0638604e9946d0814635))
 * allows sync or async preview urls ([da6e1df](https://github.com/payloadcms/payload/commit/da6e1df293ce46bc4d0c84645db61feea2881aa7))
 * bug with relationship cell when no doc is available ([40b33d9](https://github.com/payloadcms/payload/commit/40b33d9f5e99285cb0de148dbe059259817fcad8))
 * ensures 'like' query param remains functional in all cases ([20d4e72](https://github.com/payloadcms/payload/commit/20d4e72a951dfcbf1cc301d0938e5095932436b9))
 * ensures buildQuery works with fields as well as simultaneous or / and ([72fc413](https://github.com/payloadcms/payload/commit/72fc413764c6c42ba64a45f01d99b68ad3bd46c4))
+* ensures non-localized relationships with many relationTos can be queried ([7050b52](https://github.com/payloadcms/payload/commit/7050b5285e65a709a0bdfb68e8403839ef75151f))
 * ensures relationship field search can return more than 10 options ([57c0346](https://github.com/payloadcms/payload/commit/57c0346a00286a3df695ea46e5c2630494183b5b))
 * ensures richtext links retain proper formatting ([abf61d0](https://github.com/payloadcms/payload/commit/abf61d0734c09fd0fc5c5b827cb0631e11701f71))
 * ensures tquerying by relationship subpaths works ([37b21b0](https://github.com/payloadcms/payload/commit/37b21b07628e892e85c2cf979d9e2c8af0d291f7))
 * ensures uploads can be fetched with CORS ([96421b3](https://github.com/payloadcms/payload/commit/96421b3d59a87f8a3d781005c02344fe5d3a607f))
 * issue with querying by id and using comma-separated values ([d9e1b5e](https://github.com/payloadcms/payload/commit/d9e1b5ede33616893f9ba6990eeccf5410b75ae1))
+* typing for collection description ([bb18e82](https://github.com/payloadcms/payload/commit/bb18e8250c5742d9615e5780c1cd02d33ecca3d0))
 * updates field description type to include react nodes ([291c193](https://github.com/payloadcms/payload/commit/291c193ad4a9ec8ce9310cc63c714eba10eca102))
 
 
@@ -26,13 +29,18 @@
 * baseline type generation ([5a965d2](https://github.com/payloadcms/payload/commit/5a965d2263d1b246149c5220d039a6d97953d5e8))
 * ensures update hooks have access to full original docs even in spite of access control ([b2c5b7e](https://github.com/payloadcms/payload/commit/b2c5b7e5752e829c7a53c054decceb43ec33065e))
 * finishes typing all fields ([ed5a5eb](https://github.com/payloadcms/payload/commit/ed5a5ebe7e16d20577556ab233032a52bef6d2cb))
+* further types field based functions ([6b150e0](https://github.com/payloadcms/payload/commit/6b150e01d306fde5686156a2fa6a8fa00aeffe0e))
 * generates further field types ([2ca76ba](https://github.com/payloadcms/payload/commit/2ca76ba8ce6c61ee7b0a01a557b6f013ca483d6d))
 * improves querying logic ([4c85747](https://github.com/payloadcms/payload/commit/4c8574784995b1cb1f939648f4d2158286089b3d))
 * indexes filenames ([5d43262](https://github.com/payloadcms/payload/commit/5d43262f42e0529a44572f398aa1ec5fd7858286))
 * migrates admin preview to async ([40ca3da](https://github.com/payloadcms/payload/commit/40ca3dae61f8ddf05363b6cad426deba4cde1e30))
+* more typing of generics, better commenting of properties ([820b6ad](https://github.com/payloadcms/payload/commit/820b6ad4c777ff3197091f323ae0ba9993df28f5))
+* renames useFieldType to useField ([0245747](https://github.com/payloadcms/payload/commit/0245747020c7c039b15d055f54a4548a364d047e))
+* smarter generics ([b99eb8b](https://github.com/payloadcms/payload/commit/b99eb8ba739b903c7012ae69a51af6f77295cfa3))
+* supports custom onChange handling in text, select, and upload fields ([4affdc3](https://github.com/payloadcms/payload/commit/4affdc3a9397d70f5baacdd12753c8fc8c7d8368))
+* type payload operation calls with generics ([f258c59](https://github.com/payloadcms/payload/commit/f258c5904eb98db5784d4b6cdf1324736c1fe88d))
 
-## [0.12.12-beta.0](https://github.com/payloadcms/payload/compare/v0.12.3...v0.12.12-beta.0) (2021-11-24)
-
+## [0.12.13-beta.0](https://github.com/payloadcms/payload/compare/v0.12.3...v0.12.13-beta.0) (2021-11-24)
 
 ### Bug Fixes
 
@@ -56,6 +64,7 @@
 * improves querying logic ([4c85747](https://github.com/payloadcms/payload/commit/4c8574784995b1cb1f939648f4d2158286089b3d))
 * indexes filenames ([5d43262](https://github.com/payloadcms/payload/commit/5d43262f42e0529a44572f398aa1ec5fd7858286))
 * migrates admin preview to async ([40ca3da](https://github.com/payloadcms/payload/commit/40ca3dae61f8ddf05363b6cad426deba4cde1e30))
+* ensures uploads can be fetched with CORS ([96421b3](https://github.com/payloadcms/payload/commit/96421b3d59a87f8a3d781005c02344fe5d3a607f))
 
 ## [0.12.3](https://github.com/payloadcms/payload/compare/v0.12.2...v0.12.3) (2021-10-23)
 

package/components/forms.ts

@@ -6,7 +6,8 @@ export {
   useFormModified,
 } from '../dist/admin/components/forms/Form/context';
 
-export { default as useFieldType } from '../dist/admin/components/forms/useFieldType';
+export { default as useField } from '../dist/admin/components/forms/useField';
+export { default as useFieldType } from '../dist/admin/components/forms/useField';
 
 export { default as Form } from '../dist/admin/components/forms/Form';
 

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/types.d.ts

@@ -16,7 +16,7 @@ declare type CLEAR = {
 };
 declare type ADD = {
     type: 'ADD';
-    data: PaginatedDocs;
+    data: PaginatedDocs<any>;
     relation: string;
     hasMultipleRelations: boolean;
     collection: SanitizedCollectionConfig;

package/dist/admin/components/forms/DraggableSection/SectionTitle/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Pill from '../../../elements/Pill';
 import './index.scss';
 const baseClass = 'section-title';
 const SectionTitle = (props) => {
     const { label, path, readOnly } = props;
-    const { value, setValue } = useFieldType({ path });
+    const { value, setValue } = useField({ path });
     const classes = [
         baseClass,
     ].filter(Boolean).join(' ');

package/dist/admin/components/forms/field-types/Array/Array.js

@@ -6,7 +6,7 @@ import DraggableSection from '../../DraggableSection';
 import reducer from '../rowReducer';
 import { useForm } from '../../Form/context';
 import buildStateFromSchema from '../../Form/buildStateFromSchema';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Error from '../../Error';
 import { array } from '../../../../../fields/validations';
 import Banner from '../../../elements/Banner';
@@ -36,7 +36,7 @@ const ArrayFieldType = (props) => {
         return validationResult;
     }, [validate, maxRows, minRows, required]);
     const [disableFormData, setDisableFormData] = useState(false);
-    const { showError, errorMessage, value, setValue, } = useFieldType({
+    const { showError, errorMessage, value, setValue, } = useField({
         path,
         validate: memoizedValidate,
         disableFormData,

package/dist/admin/components/forms/field-types/Blocks/Blocks.js

@@ -9,7 +9,7 @@ import { useForm } from '../../Form/context';
 import buildStateFromSchema from '../../Form/buildStateFromSchema';
 import DraggableSection from '../../DraggableSection';
 import Error from '../../Error';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Popup from '../../../elements/Popup';
 import BlockSelector from './BlockSelector';
 import { blocks as blocksValidator } from '../../../../../fields/validations';
@@ -36,7 +36,7 @@ const Blocks = (props) => {
         return validationResult;
     }, [validate, maxRows, minRows, labels, blocks, required]);
     const [disableFormData, setDisableFormData] = useState(false);
-    const { showError, errorMessage, value, setValue, } = useFieldType({
+    const { showError, errorMessage, value, setValue, } = useField({
         path,
         validate: memoizedValidate,
         disableFormData,

package/dist/admin/components/forms/field-types/Checkbox/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Error from '../../Error';
 import { checkbox } from '../../../../../fields/validations';
@@ -14,7 +14,7 @@ const Checkbox = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const { value, showError, errorMessage, setValue, } = useFieldType({
+    const { value, showError, errorMessage, setValue, } = useField({
         path,
         validate: memoizedValidate,
         disableFormData,

package/dist/admin/components/forms/field-types/Code/Code.js

@@ -3,7 +3,7 @@ import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-javascript';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -23,7 +23,7 @@ const Code = (props) => {
         const validationResult = validate(value, { minLength, maxLength, required });
         return validationResult;
     }, [validate, maxLength, minLength, required]);
-    const { value, showError, setValue, errorMessage, } = useFieldType({
+    const { value, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
         enableDebouncedValue: true,

package/dist/admin/components/forms/field-types/ConfirmPassword/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import { useWatchForm } from '../../Form/context';
@@ -13,7 +13,7 @@ const ConfirmPassword = () => {
         }
         return 'Passwords do not match.';
     }, [password]);
-    const { value, showError, setValue, errorMessage, } = useFieldType({
+    const { value, showError, setValue, errorMessage, } = useField({
         path: 'confirm-password',
         disableFormData: true,
         validate,

package/dist/admin/components/forms/field-types/DateTime/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import DatePicker from '../../../elements/DatePicker';
 import withCondition from '../../withCondition';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -15,7 +15,7 @@ const DateTime = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const { value, showError, errorMessage, setValue, } = useFieldType({
+    const { value, showError, errorMessage, setValue, } = useField({
         path,
         validate: memoizedValidate,
         condition,

package/dist/admin/components/forms/field-types/Email/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import withCondition from '../../withCondition';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -13,7 +13,7 @@ const Email = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const fieldType = useFieldType({
+    const fieldType = useField({
         path,
         validate: memoizedValidate,
         enableDebouncedValue: true,

package/dist/admin/components/forms/field-types/HiddenInput/index.js

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 const HiddenInput = (props) => {
     const { name, path: pathFromProps, value: valueFromProps, modifyForm = true, } = props;
     const path = pathFromProps || name;
-    const { value, setValue } = useFieldType({
+    const { value, setValue } = useField({
         path,
     });
     useEffect(() => {

package/dist/admin/components/forms/field-types/Number/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -13,7 +13,7 @@ const NumberField = (props) => {
         const validationResult = validate(value, { min, max, required });
         return validationResult;
     }, [validate, max, min, required]);
-    const { value, showError, setValue, errorMessage, } = useFieldType({
+    const { value, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
         enableDebouncedValue: true,

package/dist/admin/components/forms/field-types/Password/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import withCondition from '../../withCondition';
@@ -12,7 +12,7 @@ const Password = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const { value, showError, formProcessing, setValue, errorMessage, } = useFieldType({
+    const { value, showError, formProcessing, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
         enableDebouncedValue: true,

package/dist/admin/components/forms/field-types/Point/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -14,7 +14,7 @@ const PointField = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const { value = [null, null], showError, setValue, errorMessage, } = useFieldType({
+    const { value = [null, null], showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
         enableDebouncedValue: true,

package/dist/admin/components/forms/field-types/RadioGroup/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Error from '../../Error';
 import Label from '../../Label';
@@ -16,7 +16,7 @@ const RadioGroup = (props) => {
         const validationResult = validate(value, { required, options });
         return validationResult;
     }, [validate, required, options]);
-    const { value, showError, errorMessage, setValue, } = useFieldType({
+    const { value, showError, errorMessage, setValue, } = useField({
         path,
         validate: memoizedValidate,
         condition,

package/dist/admin/components/forms/field-types/Relationship/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState, useReducer, } from 'react';
 import { useConfig } from '@payloadcms/config-provider';
 import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -29,7 +29,7 @@ const Relationship = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const { value, showError, errorMessage, setValue, } = useFieldType({
+    const { value, showError, errorMessage, setValue, } = useField({
         path: path || name,
         validate: memoizedValidate,
         condition,

package/dist/admin/components/forms/field-types/Relationship/types.d.ts

@@ -15,7 +15,7 @@ declare type CLEAR = {
 };
 declare type ADD = {
     type: 'ADD';
-    data: PaginatedDocs;
+    data: PaginatedDocs<any>;
     relation: string;
     hasMultipleRelations: boolean;
     collection: SanitizedCollectionConfig;

package/dist/admin/components/forms/field-types/RichText/RichText.js

@@ -4,7 +4,7 @@ import { createEditor, Transforms, Node, Element as SlateElement, Text } from 's
 import { Editable, withReact, Slate } from 'slate-react';
 import { withHistory } from 'slate-history';
 import { richText } from '../../../../../fields/validations';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -53,7 +53,7 @@ const RichText = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const fieldType = useFieldType({
+    const fieldType = useField({
         path,
         validate: memoizedValidate,
         stringify: true,

package/dist/admin/components/forms/field-types/Select/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -18,18 +18,45 @@ const formatOptions = (options) => options.map((option) => {
     };
 });
 const Select = (props) => {
-    const { path: pathFromProps, name, required, validate = select, label, options: optionsFromProps, hasMany, admin: { readOnly, style, width, description, condition, } = {}, } = props;
+    const { path: pathFromProps, name, required, validate = select, label, options: optionsFromProps, hasMany, admin: { readOnly, style, width, description, condition, } = {}, value: valueFromProps, onChange: onChangeFromProps } = props;
     const path = pathFromProps || name;
     const [options] = useState(formatOptions(optionsFromProps));
     const memoizedValidate = useCallback((value) => {
         const validationResult = validate(value, { required, options });
         return validationResult;
     }, [validate, required, options]);
-    const { value, showError, setValue, errorMessage, } = useFieldType({
+    const { value: valueFromContext, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
         condition,
     });
+    const onChange = useCallback((selectedOption) => {
+        if (!readOnly) {
+            let newValue;
+            if (hasMany) {
+                if (Array.isArray(selectedOption)) {
+                    newValue = selectedOption.map((option) => option.value);
+                }
+                else {
+                    newValue = [];
+                }
+            }
+            else {
+                newValue = selectedOption.value;
+            }
+            if (typeof onChangeFromProps === 'function') {
+                onChangeFromProps(newValue);
+            }
+            else {
+                setValue(newValue);
+            }
+        }
+    }, [
+        readOnly,
+        hasMany,
+        onChangeFromProps,
+        setValue
+    ]);
     const classes = [
         'field-type',
         baseClass,
@@ -37,6 +64,7 @@ const Select = (props) => {
         readOnly && `${baseClass}--read-only`,
     ].filter(Boolean).join(' ');
     let valueToRender;
+    const value = valueFromProps || valueFromContext || '';
     if (hasMany && Array.isArray(value)) {
         valueToRender = value.map((val) => options.find((option) => option.value === val));
     }
@@ -49,19 +77,7 @@ const Select = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement(ReactSelect, { onChange: !readOnly ? (selectedOption) => {
-                if (hasMany) {
-                    if (Array.isArray(selectedOption)) {
-                        setValue(selectedOption.map((option) => option.value));
-                    }
-                    else {
-                        setValue([]);
-                    }
-                }
-                else {
-                    setValue(selectedOption.value);
-                }
-            } : undefined, value: valueToRender, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany }),
+        React.createElement(ReactSelect, { onChange: onChange, value: valueToRender, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(Select);

package/dist/admin/components/forms/field-types/Text/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import useFieldType from '../../useFieldType';
+import React, { useCallback } from 'react';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -7,28 +7,41 @@ import { text } from '../../../../../fields/validations';
 import FieldDescription from '../../FieldDescription';
 import './index.scss';
 const Text = (props) => {
-    const { path: pathFromProps, name, required, validate = text, label, admin: { placeholder, readOnly, style, width, description, condition, } = {}, } = props;
+    const { path: pathFromProps, name, required, validate = text, label, admin: { placeholder, readOnly, style, width, description, condition, } = {}, value: valueFromProps, onChange: onChangeFromProps, } = props;
     const path = pathFromProps || name;
-    const fieldType = useFieldType({
+    const fieldType = useField({
         path,
         validate,
         enableDebouncedValue: true,
         condition,
     });
-    const { value, showError, setValue, errorMessage, } = fieldType;
+    const { value: valueFromContext, showError, setValue, errorMessage, } = fieldType;
+    const onChange = useCallback((e) => {
+        const { value: incomingValue } = e.target;
+        if (typeof onChangeFromProps === 'function') {
+            onChangeFromProps(incomingValue);
+        }
+        else {
+            setValue(e);
+        }
+    }, [
+        onChangeFromProps,
+        setValue,
+    ]);
     const classes = [
         'field-type',
         'text',
         showError && 'error',
         readOnly && 'read-only',
     ].filter(Boolean).join(' ');
+    const value = valueFromProps || valueFromContext || '';
     return (React.createElement("div", { className: classes, style: {
             ...style,
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("input", { value: value || '', onChange: setValue, disabled: readOnly, placeholder: placeholder, type: "text", id: path, name: path }),
+        React.createElement("input", { value: value, onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", id: path, name: path }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(Text);

package/dist/admin/components/forms/field-types/Textarea/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -13,7 +13,7 @@ const Textarea = (props) => {
         const validationResult = validate(value, { minLength, maxLength, required });
         return validationResult;
     }, [validate, maxLength, minLength, required]);
-    const { value, showError, setValue, errorMessage, } = useFieldType({
+    const { value, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
         enableDebouncedValue: true,

package/dist/admin/components/forms/field-types/Upload/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useModal } from '@faceless-ui/modal';
 import { useConfig } from '@payloadcms/config-provider';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
 import Label from '../../Label';
@@ -18,7 +18,7 @@ const Upload = (props) => {
     const [internalValue, setInternalValue] = useState(undefined);
     const [missingFile, setMissingFile] = useState(false);
     const { collections, serverURL, routes: { api } } = useConfig();
-    const { path: pathFromProps, name, required, admin: { readOnly, style, width, description, condition, } = {}, label, validate = upload, relationTo, fieldTypes, } = props;
+    const { path: pathFromProps, name, required, admin: { readOnly, style, width, description, condition, } = {}, label, validate = upload, relationTo, fieldTypes, value: valueFromProps, onChange: onChangeFromProps, } = props;
     const collection = collections.find((coll) => coll.slug === relationTo);
     const path = pathFromProps || name;
     const addModalSlug = `${path}-add`;
@@ -27,12 +27,13 @@ const Upload = (props) => {
         const validationResult = validate(value, { required });
         return validationResult;
     }, [validate, required]);
-    const fieldType = useFieldType({
+    const fieldType = useField({
         path,
         validate: memoizedValidate,
         condition,
     });
-    const { value, showError, setValue, errorMessage, } = fieldType;
+    const { value: valueFromContext, showError, setValue, errorMessage, } = fieldType;
+    const value = valueFromProps || valueFromContext || '';
     const classes = [
         'field-type',
         baseClass,
@@ -49,13 +50,27 @@ const Upload = (props) => {
                 }
                 else {
                     setInternalValue(undefined);
-                    setValue(null);
                     setMissingFile(true);
                 }
             };
             fetchFile();
         }
-    }, [value, setInternalValue, relationTo, api, serverURL, setValue]);
+    }, [
+        value,
+        relationTo,
+        api,
+        serverURL,
+        setValue
+    ]);
+    useEffect(() => {
+        const { id: incomingID } = internalValue || {};
+        if (typeof onChangeFromProps === 'function') {
+            onChangeFromProps(incomingID);
+        }
+        else {
+            setValue(incomingID);
+        }
+    }, [internalValue]);
     return (React.createElement("div", { className: classes, style: {
             ...style,
             width,
@@ -83,7 +98,6 @@ const Upload = (props) => {
                     fieldTypes,
                     setValue: (val) => {
                         setMissingFile(false);
-                        setValue(val.id);
                         setInternalValue(val);
                     },
                 } }),
@@ -92,7 +106,6 @@ const Upload = (props) => {
                     slug: selectExistingModalSlug,
                     setValue: (val) => {
                         setMissingFile(false);
-                        setValue(val.id);
                         setInternalValue(val);
                     },
                     addModalSlug,

package/dist/admin/components/forms/useField/index.d.ts

@@ -0,0 +1,3 @@
+import { Options, FieldType } from './types';
+declare const useField: <T extends unknown>(options: Options) => FieldType<T>;
+export default useField;