payload 0.14.3-beta.0 → 0.14.8-beta.0

package/dist/admin/components/views/collections/Edit/Auth/index.js

@@ -1,56 +1,56 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { useConfig } from '@payloadcms/config-provider';
-import Email from '../../../../forms/field-types/Email';
-import Password from '../../../../forms/field-types/Password';
-import Checkbox from '../../../../forms/field-types/Checkbox';
-import Button from '../../../../elements/Button';
-import ConfirmPassword from '../../../../forms/field-types/ConfirmPassword';
-import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
-import APIKey from './APIKey';
-import './index.scss';
-const baseClass = 'auth-fields';
-const Auth = (props) => {
-    const { useAPIKey, requirePassword, verify, collection: { slug }, email, operation } = props;
-    const [changingPassword, setChangingPassword] = useState(requirePassword);
-    const { getField } = useWatchForm();
-    const modified = useFormModified();
-    const enableAPIKey = getField('enableAPIKey');
-    useEffect(() => {
-        if (!modified) {
-            setChangingPassword(false);
-        }
-    }, [modified]);
-    const { serverURL, routes: { api, }, } = useConfig();
-    const unlock = useCallback(async () => {
-        const url = `${serverURL}${api}/${slug}/unlock`;
-        const response = await fetch(url, {
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                email,
-            }),
-            method: 'post',
-        });
-        if (response.status === 200) {
-            toast.success('Successfully unlocked', { autoClose: 3000 });
-        }
-        else {
-            toast.error('Successfully unlocked');
-        }
-    }, [serverURL, api, slug, email]);
-    return (React.createElement("div", { className: baseClass },
-        React.createElement(Email, { required: true, name: "email", label: "Email", admin: { autoComplete: 'email' } }),
-        (changingPassword || requirePassword) && (React.createElement("div", { className: `${baseClass}__changing-password` },
-            React.createElement(Password, { autoComplete: "off", required: true, name: "password", label: "New Password" }),
-            React.createElement(ConfirmPassword, null),
-            !requirePassword && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(false) }, "Cancel")))),
-        (!changingPassword && !requirePassword) && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(true) }, "Change Password")),
-        operation === 'update' && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => unlock() }, "Force Unlock")),
-        useAPIKey && (React.createElement("div", { className: `${baseClass}__api-key` },
-            React.createElement(Checkbox, { label: "Enable API Key", name: "enableAPIKey" }),
-            (enableAPIKey === null || enableAPIKey === void 0 ? void 0 : enableAPIKey.value) && (React.createElement(APIKey, null)))),
-        verify && (React.createElement(Checkbox, { label: "Verified", name: "_verified" }))));
-};
-export default Auth;
+import React, { useState, useEffect, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { useConfig } from '@payloadcms/config-provider';
+import Email from '../../../../forms/field-types/Email';
+import Password from '../../../../forms/field-types/Password';
+import Checkbox from '../../../../forms/field-types/Checkbox';
+import Button from '../../../../elements/Button';
+import ConfirmPassword from '../../../../forms/field-types/ConfirmPassword';
+import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
+import APIKey from './APIKey';
+import './index.scss';
+const baseClass = 'auth-fields';
+const Auth = (props) => {
+    const { useAPIKey, requirePassword, verify, collection: { slug }, email, operation } = props;
+    const [changingPassword, setChangingPassword] = useState(requirePassword);
+    const { getField } = useWatchForm();
+    const modified = useFormModified();
+    const enableAPIKey = getField('enableAPIKey');
+    useEffect(() => {
+        if (!modified) {
+            setChangingPassword(false);
+        }
+    }, [modified]);
+    const { serverURL, routes: { api, }, } = useConfig();
+    const unlock = useCallback(async () => {
+        const url = `${serverURL}${api}/${slug}/unlock`;
+        const response = await fetch(url, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email,
+            }),
+            method: 'post',
+        });
+        if (response.status === 200) {
+            toast.success('Successfully unlocked', { autoClose: 3000 });
+        }
+        else {
+            toast.error('Successfully unlocked');
+        }
+    }, [serverURL, api, slug, email]);
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Email, { required: true, name: "email", label: "Email", admin: { autoComplete: 'email' } }),
+        (changingPassword || requirePassword) && (React.createElement("div", { className: `${baseClass}__changing-password` },
+            React.createElement(Password, { autoComplete: "off", required: true, name: "password", label: "New Password" }),
+            React.createElement(ConfirmPassword, null),
+            !requirePassword && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(false) }, "Cancel")))),
+        (!changingPassword && !requirePassword) && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(true) }, "Change Password")),
+        operation === 'update' && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => unlock() }, "Force Unlock")),
+        useAPIKey && (React.createElement("div", { className: `${baseClass}__api-key` },
+            React.createElement(Checkbox, { label: "Enable API Key", name: "enableAPIKey" }),
+            (enableAPIKey === null || enableAPIKey === void 0 ? void 0 : enableAPIKey.value) && (React.createElement(APIKey, null)))),
+        verify && (React.createElement(Checkbox, { label: "Verified", name: "_verified" }))));
+};
+export default Auth;

package/dist/admin/components/views/collections/Edit/Auth/types.d.ts

@@ -1,10 +1,10 @@
-import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
-import { VerifyConfig } from '../../../../../../auth/types';
-export declare type Props = {
-    useAPIKey?: boolean;
-    requirePassword?: boolean;
-    verify?: VerifyConfig | boolean;
-    collection: SanitizedCollectionConfig;
-    email: string;
-    operation: 'update' | 'create';
-};
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+import { VerifyConfig } from '../../../../../../auth/types';
+export declare type Props = {
+    useAPIKey?: boolean;
+    requirePassword?: boolean;
+    verify?: VerifyConfig | boolean;
+    collection: SanitizedCollectionConfig;
+    email: string;
+    operation: 'update' | 'create';
+};

package/dist/admin/components/views/collections/Edit/Auth/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/views/collections/Edit/Default.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const DefaultEditView: React.FC<Props>;
-export default DefaultEditView;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const DefaultEditView: React.FC<Props>;
+export default DefaultEditView;

package/dist/admin/components/views/collections/Edit/Default.js

@@ -1,83 +1,83 @@
-import React from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
-import format from 'date-fns/format';
-import { useConfig } from '@payloadcms/config-provider';
-import Eyebrow from '../../../elements/Eyebrow';
-import Form from '../../../forms/Form';
-import Loading from '../../../elements/Loading';
-import PreviewButton from '../../../elements/PreviewButton';
-import FormSubmit from '../../../forms/Submit';
-import RenderFields from '../../../forms/RenderFields';
-import CopyToClipboard from '../../../elements/CopyToClipboard';
-import DuplicateDocument from '../../../elements/DuplicateDocument';
-import DeleteDocument from '../../../elements/DeleteDocument';
-import Meta from '../../../utilities/Meta';
-import fieldTypes from '../../../forms/field-types';
-import RenderTitle from '../../../elements/RenderTitle';
-import LeaveWithoutSaving from '../../../modals/LeaveWithoutSaving';
-import Auth from './Auth';
-import Upload from './Upload';
-import './index.scss';
-const baseClass = 'collection-edit';
-const DefaultEditView = (props) => {
-    var _a, _b;
-    const { params: { id } = {} } = useRouteMatch();
-    const { admin: { dateFormat }, routes: { admin } } = useConfig();
-    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, } = props;
-    const { slug, fields, admin: { useAsTitle, disableDuplicate, preview, }, timestamps, auth, upload, } = collection;
-    const classes = [
-        baseClass,
-        isEditing && `${baseClass}--is-editing`,
-    ].filter(Boolean).join(' ');
-    const operation = isEditing ? 'update' : 'create';
-    return (React.createElement("div", { className: classes },
-        React.createElement(Form, { className: `${baseClass}__form`, method: id ? 'put' : 'post', action: action, onSuccess: onSave, disabled: !hasSavePermission, initialState: initialState },
-            React.createElement("div", { className: `${baseClass}__main` },
-                React.createElement(Meta, { title: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, description: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, keywords: `${collection.labels.singular}, Payload, CMS` }),
-                React.createElement(Eyebrow, null),
-                React.createElement(LeaveWithoutSaving, null),
-                React.createElement("div", { className: `${baseClass}__edit` },
-                    isLoading && (React.createElement(Loading, null)),
-                    !isLoading && (React.createElement(React.Fragment, null,
-                        React.createElement("header", { className: `${baseClass}__header` },
-                            React.createElement("h1", null,
-                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } }))),
-                        auth && (React.createElement(Auth, { useAPIKey: auth.useAPIKey, requirePassword: !isEditing, verify: auth.verify, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: operation })),
-                        upload && (React.createElement(Upload, { data: data, collection: collection })),
-                        React.createElement(RenderFields, { operation: operation, readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a, _b; return (!((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) || (((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.position) !== 'sidebar')); }, fieldTypes: fieldTypes, fieldSchema: fields }))))),
-            React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
-                React.createElement("div", { className: `${baseClass}__sidebar` },
-                    React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },
-                        isEditing ? (React.createElement("ul", { className: `${baseClass}__collection-actions` },
-                            ((_a = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _a === void 0 ? void 0 : _a.permission) && (React.createElement(React.Fragment, null,
-                                React.createElement("li", null,
-                                    React.createElement(Link, { to: `${admin}/collections/${slug}/create` }, "Create New")),
-                                !disableDuplicate && (React.createElement("li", null,
-                                    React.createElement(DuplicateDocument, { slug: slug }))))),
-                            ((_b = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _b === void 0 ? void 0 : _b.permission) && (React.createElement("li", null,
-                                React.createElement(DeleteDocument, { collection: collection, id: id }))))) : undefined,
-                        React.createElement("div", { className: `${baseClass}__document-actions${(preview && isEditing) ? ` ${baseClass}__document-actions--with-preview` : ''}` },
-                            isEditing && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
-                            hasSavePermission && (React.createElement(FormSubmit, null, "Save"))),
-                        !isLoading && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
-                                React.createElement(RenderFields, { operation: isEditing ? 'update' : 'create', readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) === 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields })),
-                            isEditing && (React.createElement("ul", { className: `${baseClass}__meta` },
-                                React.createElement("li", { className: `${baseClass}__api-url` },
-                                    React.createElement("span", { className: `${baseClass}__label` },
-                                        "API URL",
-                                        ' ',
-                                        React.createElement(CopyToClipboard, { value: apiURL })),
-                                    React.createElement("a", { href: apiURL, target: "_blank", rel: "noopener noreferrer" }, apiURL)),
-                                React.createElement("li", null,
-                                    React.createElement("div", { className: `${baseClass}__label` }, "ID"),
-                                    React.createElement("div", null, id)),
-                                timestamps && (React.createElement(React.Fragment, null,
-                                    data.updatedAt && (React.createElement("li", null,
-                                        React.createElement("div", { className: `${baseClass}__label` }, "Last Modified"),
-                                        React.createElement("div", null, format(new Date(data.updatedAt), dateFormat)))),
-                                    data.createdAt && (React.createElement("li", null,
-                                        React.createElement("div", { className: `${baseClass}__label` }, "Created"),
-                                        React.createElement("div", null, format(new Date(data.createdAt), dateFormat))))))))))))))));
-};
-export default DefaultEditView;
+import React from 'react';
+import { Link, useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '@payloadcms/config-provider';
+import Eyebrow from '../../../elements/Eyebrow';
+import Form from '../../../forms/Form';
+import Loading from '../../../elements/Loading';
+import PreviewButton from '../../../elements/PreviewButton';
+import FormSubmit from '../../../forms/Submit';
+import RenderFields from '../../../forms/RenderFields';
+import CopyToClipboard from '../../../elements/CopyToClipboard';
+import DuplicateDocument from '../../../elements/DuplicateDocument';
+import DeleteDocument from '../../../elements/DeleteDocument';
+import Meta from '../../../utilities/Meta';
+import fieldTypes from '../../../forms/field-types';
+import RenderTitle from '../../../elements/RenderTitle';
+import LeaveWithoutSaving from '../../../modals/LeaveWithoutSaving';
+import Auth from './Auth';
+import Upload from './Upload';
+import './index.scss';
+const baseClass = 'collection-edit';
+const DefaultEditView = (props) => {
+    var _a, _b;
+    const { params: { id } = {} } = useRouteMatch();
+    const { admin: { dateFormat }, routes: { admin } } = useConfig();
+    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, } = props;
+    const { slug, fields, admin: { useAsTitle, disableDuplicate, preview, }, timestamps, auth, upload, } = collection;
+    const classes = [
+        baseClass,
+        isEditing && `${baseClass}--is-editing`,
+    ].filter(Boolean).join(' ');
+    const operation = isEditing ? 'update' : 'create';
+    return (React.createElement("div", { className: classes },
+        React.createElement(Form, { className: `${baseClass}__form`, method: id ? 'put' : 'post', action: action, onSuccess: onSave, disabled: !hasSavePermission, initialState: initialState },
+            React.createElement("div", { className: `${baseClass}__main` },
+                React.createElement(Meta, { title: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, description: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, keywords: `${collection.labels.singular}, Payload, CMS` }),
+                React.createElement(Eyebrow, null),
+                React.createElement(LeaveWithoutSaving, null),
+                React.createElement("div", { className: `${baseClass}__edit` },
+                    isLoading && (React.createElement(Loading, null)),
+                    !isLoading && (React.createElement(React.Fragment, null,
+                        React.createElement("header", { className: `${baseClass}__header` },
+                            React.createElement("h1", null,
+                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } }))),
+                        auth && (React.createElement(Auth, { useAPIKey: auth.useAPIKey, requirePassword: !isEditing, verify: auth.verify, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: operation })),
+                        upload && (React.createElement(Upload, { data: data, collection: collection })),
+                        React.createElement(RenderFields, { operation: operation, readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a, _b; return (!((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) || (((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.position) !== 'sidebar')); }, fieldTypes: fieldTypes, fieldSchema: fields }))))),
+            React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
+                React.createElement("div", { className: `${baseClass}__sidebar` },
+                    React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },
+                        isEditing ? (React.createElement("ul", { className: `${baseClass}__collection-actions` },
+                            ((_a = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _a === void 0 ? void 0 : _a.permission) && (React.createElement(React.Fragment, null,
+                                React.createElement("li", null,
+                                    React.createElement(Link, { to: `${admin}/collections/${slug}/create` }, "Create New")),
+                                !disableDuplicate && (React.createElement("li", null,
+                                    React.createElement(DuplicateDocument, { slug: slug }))))),
+                            ((_b = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _b === void 0 ? void 0 : _b.permission) && (React.createElement("li", null,
+                                React.createElement(DeleteDocument, { collection: collection, id: id }))))) : undefined,
+                        React.createElement("div", { className: `${baseClass}__document-actions${(preview && isEditing) ? ` ${baseClass}__document-actions--with-preview` : ''}` },
+                            isEditing && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                            hasSavePermission && (React.createElement(FormSubmit, null, "Save"))),
+                        !isLoading && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
+                                React.createElement(RenderFields, { operation: isEditing ? 'update' : 'create', readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) === 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields })),
+                            isEditing && (React.createElement("ul", { className: `${baseClass}__meta` },
+                                React.createElement("li", { className: `${baseClass}__api-url` },
+                                    React.createElement("span", { className: `${baseClass}__label` },
+                                        "API URL",
+                                        ' ',
+                                        React.createElement(CopyToClipboard, { value: apiURL })),
+                                    React.createElement("a", { href: apiURL, target: "_blank", rel: "noopener noreferrer" }, apiURL)),
+                                React.createElement("li", null,
+                                    React.createElement("div", { className: `${baseClass}__label` }, "ID"),
+                                    React.createElement("div", null, id)),
+                                timestamps && (React.createElement(React.Fragment, null,
+                                    data.updatedAt && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Last Modified"),
+                                        React.createElement("div", null, format(new Date(data.updatedAt), dateFormat)))),
+                                    data.createdAt && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Created"),
+                                        React.createElement("div", null, format(new Date(data.createdAt), dateFormat))))))))))))))));
+};
+export default DefaultEditView;

package/dist/admin/components/views/collections/Edit/Upload/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Upload: React.FC<Props>;
-export default Upload;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Upload: React.FC<Props>;
+export default Upload;

package/dist/admin/components/views/collections/Edit/Upload/index.js

@@ -1,118 +1,118 @@
-import React, { useState, useRef, useEffect, useCallback, } from 'react';
-import useField from '../../../../forms/useField';
-import Button from '../../../../elements/Button';
-import FileDetails from '../../../../elements/FileDetails';
-import Error from '../../../../forms/Error';
-import './index.scss';
-const baseClass = 'file-field';
-const handleDrag = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-};
-const validate = (value) => {
-    if (!value && value !== undefined) {
-        return 'A file is required.';
-    }
-    return true;
-};
-const Upload = (props) => {
-    var _a, _b;
-    const inputRef = useRef(null);
-    const dropRef = useRef(null);
-    const [selectingFile, setSelectingFile] = useState(false);
-    const [dragging, setDragging] = useState(false);
-    const [dragCounter, setDragCounter] = useState(0);
-    const [replacingFile, setReplacingFile] = useState(false);
-    const { data = {}, collection, } = props;
-    const { filename } = data;
-    const { value, setValue, showError, errorMessage, } = useField({
-        path: 'file',
-        validate,
-    });
-    const handleDragIn = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragCounter((count) => count + 1);
-        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
-            setDragging(true);
-        }
-    }, []);
-    const handleDragOut = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragCounter((count) => count - 1);
-        if (dragCounter > 1)
-            return;
-        setDragging(false);
-    }, [dragCounter]);
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragging(false);
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            setValue(e.dataTransfer.files[0]);
-            setDragging(false);
-            e.dataTransfer.clearData();
-            setDragCounter(0);
-        }
-        else {
-            setDragging(false);
-        }
-    }, [setValue]);
-    // Only called when input is interacted with directly
-    // Not called when drag + drop is used
-    // Or when input is cleared
-    const handleInputChange = useCallback(() => {
-        var _a, _b;
-        setSelectingFile(false);
-        setValue(((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) || null);
-    }, [inputRef, setValue]);
-    useEffect(() => {
-        if (selectingFile) {
-            inputRef.current.click();
-            setSelectingFile(false);
-        }
-    }, [selectingFile, inputRef, setSelectingFile]);
-    useEffect(() => {
-        const div = dropRef.current;
-        if (div) {
-            div.addEventListener('dragenter', handleDragIn);
-            div.addEventListener('dragleave', handleDragOut);
-            div.addEventListener('dragover', handleDrag);
-            div.addEventListener('drop', handleDrop);
-            return () => {
-                div.removeEventListener('dragenter', handleDragIn);
-                div.removeEventListener('dragleave', handleDragOut);
-                div.removeEventListener('dragover', handleDrag);
-                div.removeEventListener('drop', handleDrop);
-            };
-        }
-        return () => null;
-    }, [handleDragIn, handleDragOut, handleDrop, value]);
-    useEffect(() => {
-        setReplacingFile(false);
-    }, [data]);
-    const classes = [
-        baseClass,
-        dragging && `${baseClass}--dragging`,
-        'field-type',
-    ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        (filename && !replacingFile) && (React.createElement(FileDetails, { doc: data, collection: collection, handleRemove: () => {
-                setReplacingFile(true);
-                setValue(null);
-            } })),
-        (!filename || replacingFile) && (React.createElement("div", { className: `${baseClass}__upload` },
-            value && (React.createElement("div", { className: `${baseClass}__file-selected` },
-                React.createElement("span", { className: `${baseClass}__filename` }, value.name),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
-                        setValue(null);
-                    } }))),
-            !value && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: `${baseClass}__drop-zone`, ref: dropRef },
-                    React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setSelectingFile(true) }, "Select a file"),
-                    React.createElement("span", { className: `${baseClass}__drag-label` }, "or drag and drop a file here")))),
-            React.createElement("input", { ref: inputRef, type: "file", accept: (_b = (_a = collection === null || collection === void 0 ? void 0 : collection.upload) === null || _a === void 0 ? void 0 : _a.mimeTypes) === null || _b === void 0 ? void 0 : _b.join(','), onChange: handleInputChange })))));
-};
-export default Upload;
+import React, { useState, useRef, useEffect, useCallback, } from 'react';
+import useField from '../../../../forms/useField';
+import Button from '../../../../elements/Button';
+import FileDetails from '../../../../elements/FileDetails';
+import Error from '../../../../forms/Error';
+import './index.scss';
+const baseClass = 'file-field';
+const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+};
+const validate = (value) => {
+    if (!value && value !== undefined) {
+        return 'A file is required.';
+    }
+    return true;
+};
+const Upload = (props) => {
+    var _a, _b;
+    const inputRef = useRef(null);
+    const dropRef = useRef(null);
+    const [selectingFile, setSelectingFile] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const [dragCounter, setDragCounter] = useState(0);
+    const [replacingFile, setReplacingFile] = useState(false);
+    const { data = {}, collection, } = props;
+    const { filename } = data;
+    const { value, setValue, showError, errorMessage, } = useField({
+        path: 'file',
+        validate,
+    });
+    const handleDragIn = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((count) => count + 1);
+        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+            setDragging(true);
+        }
+    }, []);
+    const handleDragOut = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((count) => count - 1);
+        if (dragCounter > 1)
+            return;
+        setDragging(false);
+    }, [dragCounter]);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            setValue(e.dataTransfer.files[0]);
+            setDragging(false);
+            e.dataTransfer.clearData();
+            setDragCounter(0);
+        }
+        else {
+            setDragging(false);
+        }
+    }, [setValue]);
+    // Only called when input is interacted with directly
+    // Not called when drag + drop is used
+    // Or when input is cleared
+    const handleInputChange = useCallback(() => {
+        var _a, _b;
+        setSelectingFile(false);
+        setValue(((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) || null);
+    }, [inputRef, setValue]);
+    useEffect(() => {
+        if (selectingFile) {
+            inputRef.current.click();
+            setSelectingFile(false);
+        }
+    }, [selectingFile, inputRef, setSelectingFile]);
+    useEffect(() => {
+        const div = dropRef.current;
+        if (div) {
+            div.addEventListener('dragenter', handleDragIn);
+            div.addEventListener('dragleave', handleDragOut);
+            div.addEventListener('dragover', handleDrag);
+            div.addEventListener('drop', handleDrop);
+            return () => {
+                div.removeEventListener('dragenter', handleDragIn);
+                div.removeEventListener('dragleave', handleDragOut);
+                div.removeEventListener('dragover', handleDrag);
+                div.removeEventListener('drop', handleDrop);
+            };
+        }
+        return () => null;
+    }, [handleDragIn, handleDragOut, handleDrop, value]);
+    useEffect(() => {
+        setReplacingFile(false);
+    }, [data]);
+    const classes = [
+        baseClass,
+        dragging && `${baseClass}--dragging`,
+        'field-type',
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        (filename && !replacingFile) && (React.createElement(FileDetails, { doc: data, collection: collection, handleRemove: () => {
+                setReplacingFile(true);
+                setValue(null);
+            } })),
+        (!filename || replacingFile) && (React.createElement("div", { className: `${baseClass}__upload` },
+            value && (React.createElement("div", { className: `${baseClass}__file-selected` },
+                React.createElement("span", { className: `${baseClass}__filename` }, value.name),
+                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
+                        setValue(null);
+                    } }))),
+            !value && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: `${baseClass}__drop-zone`, ref: dropRef },
+                    React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setSelectingFile(true) }, "Select a file"),
+                    React.createElement("span", { className: `${baseClass}__drag-label` }, "or drag and drop a file here")))),
+            React.createElement("input", { ref: inputRef, type: "file", accept: (_b = (_a = collection === null || collection === void 0 ? void 0 : collection.upload) === null || _a === void 0 ? void 0 : _a.mimeTypes) === null || _b === void 0 ? void 0 : _b.join(','), onChange: handleInputChange })))));
+};
+export default Upload;

package/dist/admin/components/views/collections/Edit/Upload/types.d.ts

@@ -1,12 +1,12 @@
-import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
-export declare type Data = {
-    filename: string;
-    mimeType: string;
-    filesize: number;
-};
-export declare type Props = {
-    data?: Data;
-    collection: SanitizedCollectionConfig;
-    adminThumbnail?: string;
-    mimeTypes?: string[];
-};
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+export declare type Data = {
+    filename: string;
+    mimeType: string;
+    filesize: number;
+};
+export declare type Props = {
+    data?: Data;
+    collection: SanitizedCollectionConfig;
+    adminThumbnail?: string;
+    mimeTypes?: string[];
+};

package/dist/admin/components/views/collections/Edit/Upload/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/views/collections/Edit/formatFields.d.ts

@@ -1,4 +1,4 @@
-import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
-import { Field } from '../../../../../fields/config/types';
-declare const formatFields: (collection: SanitizedCollectionConfig, isEditing: boolean) => Field[];
-export default formatFields;
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { Field } from '../../../../../fields/config/types';
+declare const formatFields: (collection: SanitizedCollectionConfig, isEditing: boolean) => Field[];
+export default formatFields;