payload 1.0.25 → 1.0.26

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,99 +1,99 @@
-import React from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
-import format from 'date-fns/format';
-import { useConfig } from '../../../utilities/Config';
-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 VersionsCount from '../../../elements/VersionsCount';
-import Upload from './Upload';
-import Autosave from '../../../elements/Autosave';
-import Status from '../../../elements/Status';
-import Publish from '../../../elements/Publish';
-import SaveDraft from '../../../elements/SaveDraft';
-import { useDocumentInfo } from '../../../utilities/DocumentInfo';
-import { OperationContext } from '../../../utilities/OperationProvider';
-import { Gutter } from '../../../elements/Gutter';
-import './index.scss';
-const baseClass = 'collection-edit';
-const DefaultEditView = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    const { params: { id } = {} } = useRouteMatch();
-    const { admin: { dateFormat }, routes: { admin } } = useConfig();
-    const { publishedDoc } = useDocumentInfo();
-    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, } = props;
-    const { slug, fields, admin: { useAsTitle, disableDuplicate, preview, hideAPIURL, }, versions, 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 },
-        isLoading && (React.createElement(Loading, null)),
-        !isLoading && (React.createElement(OperationContext.Provider, { value: operation },
-            React.createElement(Form, { className: `${baseClass}__form`, method: id ? 'patch' : '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),
-                    !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
-                    React.createElement(Gutter, { className: `${baseClass}__edit` },
-                        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, { 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` },
-                            React.createElement("ul", { className: `${baseClass}__collection-actions` },
-                                ((_d = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _d === void 0 ? void 0 : _d.permission) && (React.createElement(React.Fragment, null,
-                                    React.createElement("li", null,
-                                        React.createElement(Link, { id: "action-create", to: `${admin}/collections/${slug}/create` }, "Create New")),
-                                    !disableDuplicate && (React.createElement("li", null,
-                                        React.createElement(DuplicateDocument, { slug: slug }))))),
-                                ((_e = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _e === void 0 ? void 0 : _e.permission) && (React.createElement("li", null,
-                                    React.createElement(DeleteDocument, { collection: collection, id: id, buttonId: "action-delete" })))),
-                            React.createElement("div", { className: `${baseClass}__document-actions${((((_f = collection.versions) === null || _f === void 0 ? void 0 : _f.drafts) && !((_h = (_g = collection.versions) === null || _g === void 0 ? void 0 : _g.drafts) === null || _h === void 0 ? void 0 : _h.autosave)) || (isEditing && preview)) ? ` ${baseClass}__document-actions--has-2` : ''}` },
-                                (preview && (!((_j = collection.versions) === null || _j === void 0 ? void 0 : _j.drafts) || ((_l = (_k = collection.versions) === null || _k === void 0 ? void 0 : _k.drafts) === null || _l === void 0 ? void 0 : _l.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
-                                hasSavePermission && (React.createElement(React.Fragment, null,
-                                    ((_m = collection.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(React.Fragment, null,
-                                        !collection.versions.drafts.autosave && (React.createElement(SaveDraft, null)),
-                                        React.createElement(Publish, null))),
-                                    !((_o = collection.versions) === null || _o === void 0 ? void 0 : _o.drafts) && (React.createElement(FormSubmit, { buttonId: "action-save" }, "Save"))))),
-                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
-                                (isEditing && preview && (((_p = collection.versions) === null || _p === void 0 ? void 0 : _p.drafts) && !((_r = (_q = collection.versions) === null || _q === void 0 ? void 0 : _q.drafts) === null || _r === void 0 ? void 0 : _r.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
-                                ((_s = collection.versions) === null || _s === void 0 ? void 0 : _s.drafts) && (React.createElement(React.Fragment, null,
-                                    React.createElement(Status, null),
-                                    (((_t = collection.versions) === null || _t === void 0 ? void 0 : _t.drafts.autosave) && hasSavePermission) && (React.createElement(Autosave, { publishedDocUpdatedAt: (publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.updatedAt) || (data === null || data === void 0 ? void 0 : data.createdAt), collection: collection, id: id })))),
-                                React.createElement(RenderFields, { 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` },
-                                !hideAPIURL && (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))),
-                                versions && (React.createElement("li", null,
-                                    React.createElement("div", { className: `${baseClass}__label` }, "Versions"),
-                                    React.createElement(VersionsCount, { collection: collection, id: 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)))),
-                                    ((publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.createdAt) || (data === null || data === void 0 ? void 0 : data.createdAt)) && (React.createElement("li", null,
-                                        React.createElement("div", { className: `${baseClass}__label` }, "Created"),
-                                        React.createElement("div", null, format(new Date((publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.createdAt) || (data === null || data === void 0 ? void 0 : 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 '../../../utilities/Config';
+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 VersionsCount from '../../../elements/VersionsCount';
+import Upload from './Upload';
+import Autosave from '../../../elements/Autosave';
+import Status from '../../../elements/Status';
+import Publish from '../../../elements/Publish';
+import SaveDraft from '../../../elements/SaveDraft';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+import { OperationContext } from '../../../utilities/OperationProvider';
+import { Gutter } from '../../../elements/Gutter';
+import './index.scss';
+const baseClass = 'collection-edit';
+const DefaultEditView = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const { params: { id } = {} } = useRouteMatch();
+    const { admin: { dateFormat }, routes: { admin } } = useConfig();
+    const { publishedDoc } = useDocumentInfo();
+    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, } = props;
+    const { slug, fields, admin: { useAsTitle, disableDuplicate, preview, hideAPIURL, }, versions, 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 },
+        isLoading && (React.createElement(Loading, null)),
+        !isLoading && (React.createElement(OperationContext.Provider, { value: operation },
+            React.createElement(Form, { className: `${baseClass}__form`, method: id ? 'patch' : '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),
+                    !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
+                    React.createElement(Gutter, { className: `${baseClass}__edit` },
+                        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, { 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` },
+                            React.createElement("ul", { className: `${baseClass}__collection-actions` },
+                                ((_d = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _d === void 0 ? void 0 : _d.permission) && (React.createElement(React.Fragment, null,
+                                    React.createElement("li", null,
+                                        React.createElement(Link, { id: "action-create", to: `${admin}/collections/${slug}/create` }, "Create New")),
+                                    !disableDuplicate && (React.createElement("li", null,
+                                        React.createElement(DuplicateDocument, { slug: slug }))))),
+                                ((_e = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _e === void 0 ? void 0 : _e.permission) && (React.createElement("li", null,
+                                    React.createElement(DeleteDocument, { collection: collection, id: id, buttonId: "action-delete" })))),
+                            React.createElement("div", { className: `${baseClass}__document-actions${((((_f = collection.versions) === null || _f === void 0 ? void 0 : _f.drafts) && !((_h = (_g = collection.versions) === null || _g === void 0 ? void 0 : _g.drafts) === null || _h === void 0 ? void 0 : _h.autosave)) || (isEditing && preview)) ? ` ${baseClass}__document-actions--has-2` : ''}` },
+                                (preview && (!((_j = collection.versions) === null || _j === void 0 ? void 0 : _j.drafts) || ((_l = (_k = collection.versions) === null || _k === void 0 ? void 0 : _k.drafts) === null || _l === void 0 ? void 0 : _l.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                                hasSavePermission && (React.createElement(React.Fragment, null,
+                                    ((_m = collection.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(React.Fragment, null,
+                                        !collection.versions.drafts.autosave && (React.createElement(SaveDraft, null)),
+                                        React.createElement(Publish, null))),
+                                    !((_o = collection.versions) === null || _o === void 0 ? void 0 : _o.drafts) && (React.createElement(FormSubmit, { buttonId: "action-save" }, "Save"))))),
+                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
+                                (isEditing && preview && (((_p = collection.versions) === null || _p === void 0 ? void 0 : _p.drafts) && !((_r = (_q = collection.versions) === null || _q === void 0 ? void 0 : _q.drafts) === null || _r === void 0 ? void 0 : _r.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                                ((_s = collection.versions) === null || _s === void 0 ? void 0 : _s.drafts) && (React.createElement(React.Fragment, null,
+                                    React.createElement(Status, null),
+                                    (((_t = collection.versions) === null || _t === void 0 ? void 0 : _t.drafts.autosave) && hasSavePermission) && (React.createElement(Autosave, { publishedDocUpdatedAt: (publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.updatedAt) || (data === null || data === void 0 ? void 0 : data.createdAt), collection: collection, id: id })))),
+                                React.createElement(RenderFields, { 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` },
+                                !hideAPIURL && (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))),
+                                versions && (React.createElement("li", null,
+                                    React.createElement("div", { className: `${baseClass}__label` }, "Versions"),
+                                    React.createElement(VersionsCount, { collection: collection, id: 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)))),
+                                    ((publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.createdAt) || (data === null || data === void 0 ? void 0 : data.createdAt)) && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Created"),
+                                        React.createElement("div", null, format(new Date((publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.createdAt) || (data === null || data === void 0 ? void 0 : 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;

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

@@ -1,5 +1,5 @@
-import { fieldAffectsData } from '../../../../../fields/config/types';
-const formatFields = (collection, isEditing) => (isEditing
-    ? collection.fields.filter((field) => (fieldAffectsData(field) && field.name !== 'id') || true)
-    : collection.fields);
-export default formatFields;
+import { fieldAffectsData } from '../../../../../fields/config/types';
+const formatFields = (collection, isEditing) => (isEditing
+    ? collection.fields.filter((field) => (fieldAffectsData(field) && field.name !== 'id') || true)
+    : collection.fields);
+export default formatFields;

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

@@ -1,4 +1,4 @@
-import React from 'react';
-import { IndexProps } from './types';
-declare const EditView: React.FC<IndexProps>;
-export default EditView;
+import React from 'react';
+import { IndexProps } from './types';
+declare const EditView: React.FC<IndexProps>;
+export default EditView;