@payloadcms/ui 3.0.0-canary.7660f90 → 3.0.0-canary.79ab53e

package/dist/elements/Upload/index.js

@@ -1,15 +1,17 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isImage } from 'payload/shared';
-import React, { useCallback, useEffect, useState } from 'react';
+import { isImage, reduceFieldsToValues } from 'payload/shared';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { FieldError } from '../../fields/FieldError/index.js';
 import { fieldBaseClass } from '../../fields/shared/index.js';
-import { useForm } from '../../forms/Form/context.js';
+import { useForm } from '../../forms/Form/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js';
+import { useUploadEdits } from '../../providers/UploadEdits/index.js';
 import { Button } from '../Button/index.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { Dropzone } from '../Dropzone/index.js';
@@ -21,234 +23,348 @@ import './index.scss';
 const baseClass = 'file-field';
 export const editDrawerSlug = 'edit-upload';
 export const sizePreviewSlug = 'preview-sizes';
-const validate = (value)=>{
-    if (!value && value !== undefined) {
-        return 'A file is required.';
-    }
-    return true;
+const validate = value => {
+  if (!value && value !== undefined) {
+    return 'A file is required.';
+  }
+  return true;
 };
-export const UploadActions = ({ customActions, enableAdjustments, enablePreviewSizes, mimeType })=>{
-    const { t } = useTranslation();
-    const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== 'image/svg+xml';
-    if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) return null;
-    return /*#__PURE__*/ _jsxs("div", {
+export const UploadActions = t0 => {
+  const $ = _c(9);
+  const {
+    customActions,
+    enableAdjustments,
+    enablePreviewSizes,
+    mimeType
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  let t2;
+  if ($[0] !== mimeType || $[1] !== customActions || $[2] !== enablePreviewSizes || $[3] !== t || $[4] !== enableAdjustments) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== "image/svg+xml";
+      if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) {
+        t2 = null;
+        break bb0;
+      }
+      let t3;
+      if ($[7] !== customActions) {
+        t3 = customActions && customActions.map(_temp);
+        $[7] = customActions;
+        $[8] = t3;
+      } else {
+        t3 = $[8];
+      }
+      t1 = _jsxs("div", {
         className: `${baseClass}__upload-actions`,
-        children: [
-            fileTypeIsAdjustable && /*#__PURE__*/ _jsxs(React.Fragment, {
-                children: [
-                    enablePreviewSizes && /*#__PURE__*/ _jsx(DrawerToggler, {
-                        className: `${baseClass}__previewSizes`,
-                        slug: sizePreviewSlug,
-                        children: t('upload:previewSizes')
-                    }),
-                    enableAdjustments && /*#__PURE__*/ _jsx(DrawerToggler, {
-                        className: `${baseClass}__edit`,
-                        slug: editDrawerSlug,
-                        children: t('upload:editImage')
-                    })
-                ]
-            }),
-            customActions && customActions.map((CustomAction, i)=>{
-                return /*#__PURE__*/ _jsx(React.Fragment, {
-                    children: CustomAction
-                }, i);
-            })
-        ]
-    });
+        children: [fileTypeIsAdjustable && _jsxs(React.Fragment, {
+          children: [enablePreviewSizes && _jsx(DrawerToggler, {
+            className: `${baseClass}__previewSizes`,
+            slug: sizePreviewSlug,
+            children: t("upload:previewSizes")
+          }), enableAdjustments && _jsx(DrawerToggler, {
+            className: `${baseClass}__edit`,
+            slug: editDrawerSlug,
+            children: t("upload:editImage")
+          })]
+        }), t3]
+      });
+    }
+    $[0] = mimeType;
+    $[1] = customActions;
+    $[2] = enablePreviewSizes;
+    $[3] = t;
+    $[4] = enableAdjustments;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
 };
-export const Upload = (props)=>{
-    const { collectionSlug, customActions, initialState, onChange, uploadConfig } = props;
-    const [replacingFile, setReplacingFile] = useState(false);
-    const [fileSrc, setFileSrc] = useState(null);
-    const { t } = useTranslation();
-    const { setModified } = useForm();
-    const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams();
-    const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true));
-    const { docPermissions } = useDocumentInfo();
-    const { errorMessage, setValue, showError, value } = useField({
-        path: 'file',
-        validate
-    });
-    const [_crop, setCrop] = useState({
-        x: 0,
-        y: 0
+export const Upload = props => {
+  const {
+    collectionSlug,
+    customActions,
+    initialState,
+    onChange,
+    uploadConfig
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const {
+    setModified
+  } = useForm();
+  const {
+    resetUploadEdits,
+    updateUploadEdits,
+    uploadEdits
+  } = useUploadEdits();
+  const {
+    docPermissions
+  } = useDocumentInfo();
+  const {
+    errorMessage,
+    setValue,
+    showError,
+    value
+  } = useField({
+    path: 'file',
+    validate
+  });
+  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true));
+  const [fileSrc, setFileSrc] = useState(null);
+  const [replacingFile, setReplacingFile] = useState(false);
+  const [filename, setFilename] = useState(value?.name || '');
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const [fileUrl, setFileUrl] = useState('');
+  const urlInputRef = useRef(null);
+  const inputRef = useRef(null);
+  const handleFileChange = useCallback(newFile => {
+    if (newFile instanceof File) {
+      setFileSrc(URL.createObjectURL(newFile));
+    }
+    setValue(newFile);
+    setShowUrlInput(false);
+    if (typeof onChange === 'function') {
+      onChange(newFile);
+    }
+  }, [onChange, setValue]);
+  const renameFile = (fileToChange, newName) => {
+    // Creating a new File object with updated properties
+    const newFile_0 = new File([fileToChange], newName, {
+      type: fileToChange.type,
+      lastModified: fileToChange.lastModified
     });
-    const handleFileChange = React.useCallback((newFile)=>{
-        if (newFile instanceof File) {
-            const fileReader = new FileReader();
-            fileReader.onload = (e)=>{
-                const imgSrc = e.target?.result;
-                if (typeof imgSrc === 'string') {
-                    setFileSrc(imgSrc);
-                }
-            };
-            fileReader.readAsDataURL(newFile);
-        }
-        setValue(newFile);
-        if (typeof onChange === 'function') {
-            onChange(newFile);
-        }
-    }, [
-        onChange,
-        setValue
-    ]);
-    const handleFileNameChange = (e)=>{
-        const updatedFileName = e.target.value;
-        if (value) {
-            const fileValue = value;
-            // Creating a new File object with updated properties
-            const newFile = new File([
-                fileValue
-            ], updatedFileName, {
-                type: fileValue.type
-            });
-            handleFileChange(newFile);
-        }
-    };
-    const handleFileSelection = React.useCallback((files)=>{
-        const fileToUpload = files?.[0];
-        handleFileChange(fileToUpload);
-    }, [
-        handleFileChange
-    ]);
-    const handleFileRemoval = useCallback(()=>{
-        setReplacingFile(true);
-        handleFileChange(null);
-        setFileSrc('');
-    }, [
-        handleFileChange
-    ]);
-    const onEditsSave = React.useCallback(({ crop, focalPosition })=>{
-        setCrop({
-            x: crop.x || 0,
-            y: crop.y || 0
-        });
-        setModified(true);
-        dispatchFormQueryParams({
-            type: 'SET',
-            params: {
-                uploadEdits: crop || focalPosition ? {
-                    crop: crop || null,
-                    focalPoint: focalPosition ? focalPosition : null
-                } : null
-            }
+    return newFile_0;
+  };
+  const handleFileNameChange = React.useCallback(e => {
+    const updatedFileName = e.target.value;
+    if (value) {
+      handleFileChange(renameFile(value, updatedFileName));
+      setFilename(updatedFileName);
+    }
+  }, [handleFileChange, value]);
+  const handleFileSelection = useCallback(files => {
+    const fileToUpload = files?.[0];
+    handleFileChange(fileToUpload);
+  }, [handleFileChange]);
+  const handleFileRemoval = useCallback(() => {
+    setReplacingFile(true);
+    handleFileChange(null);
+    setFileSrc('');
+    setFileUrl('');
+    setDoc({});
+    resetUploadEdits();
+    setShowUrlInput(false);
+  }, [handleFileChange, resetUploadEdits]);
+  const onEditsSave = useCallback(args => {
+    setModified(true);
+    updateUploadEdits(args);
+  }, [setModified, updateUploadEdits]);
+  const handleUrlSubmit = async () => {
+    if (fileUrl) {
+      try {
+        const response = await fetch(fileUrl);
+        const data = await response.blob();
+        // Extract the file name from the URL
+        const fileName = fileUrl.split('/').pop();
+        // Create a new File object from the Blob data
+        const file = new File([data], fileName, {
+          type: data.type
         });
-    }, [
-        dispatchFormQueryParams,
-        setModified
-    ]);
-    useEffect(()=>{
-        setDoc(reduceFieldsToValues(initialState || {}, true));
-        setReplacingFile(false);
-    }, [
-        initialState
-    ]);
-    const canRemoveUpload = docPermissions?.update?.permission && 'delete' in docPermissions && docPermissions?.delete?.permission;
-    const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
-    const hasResizeOptions = Boolean(uploadConfig?.resizeOptions);
-    // Explicity check if set to true, default is undefined
-    const focalPointEnabled = uploadConfig?.focalPoint === true;
-    const { crop: showCrop = true, focalPoint = true } = uploadConfig;
-    const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            fieldBaseClass,
-            baseClass
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsx(FieldError, {
-                message: errorMessage,
-                showError: showError
-            }),
-            doc.filename && !replacingFile && /*#__PURE__*/ _jsx(FileDetails, {
-                collectionSlug: collectionSlug,
-                customUploadActions: customActions,
-                doc: doc,
-                enableAdjustments: showCrop || showFocalPoint,
-                handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
-                hasImageSizes: hasImageSizes,
-                imageCacheTag: doc.updatedAt,
-                uploadConfig: uploadConfig
-            }),
-            (!doc.filename || replacingFile) && /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__upload`,
-                children: [
-                    !value && /*#__PURE__*/ _jsx(Dropzone, {
-                        className: `${baseClass}__dropzone`,
-                        mimeTypes: uploadConfig?.mimeTypes,
-                        onChange: handleFileSelection
-                    }),
-                    value && fileSrc && /*#__PURE__*/ _jsxs(React.Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: `${baseClass}__thumbnail-wrap`,
-                                children: /*#__PURE__*/ _jsx(Thumbnail, {
-                                    collectionSlug: collectionSlug,
-                                    fileSrc: isImage(value.type) ? fileSrc : null
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: `${baseClass}__file-adjustments`,
-                                children: [
-                                    /*#__PURE__*/ _jsx("input", {
-                                        className: `${baseClass}__filename`,
-                                        onChange: handleFileNameChange,
-                                        type: "text",
-                                        value: value.name
-                                    }),
-                                    /*#__PURE__*/ _jsx(UploadActions, {
-                                        customActions: customActions,
-                                        enableAdjustments: showCrop || showFocalPoint,
-                                        enablePreviewSizes: hasImageSizes && doc.filename && !replacingFile,
-                                        mimeType: value.type
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                buttonStyle: "icon-label",
-                                className: `${baseClass}__remove`,
-                                icon: "x",
-                                iconStyle: "with-border",
-                                onClick: handleFileRemoval,
-                                round: true,
-                                tooltip: t('general:cancel')
-                            })
-                        ]
-                    })
-                ]
-            }),
-            (value || doc.filename) && /*#__PURE__*/ _jsx(Drawer, {
-                Header: null,
-                slug: editDrawerSlug,
-                children: /*#__PURE__*/ _jsx(EditUpload, {
-                    fileName: value?.name || doc?.filename,
-                    fileSrc: fileSrc || doc?.url,
-                    imageCacheTag: doc.updatedAt,
-                    initialCrop: formQueryParams?.uploadEdits?.crop ?? {},
-                    initialFocalPoint: {
-                        x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,
-                        y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50
-                    },
-                    onSave: onEditsSave,
-                    showCrop: showCrop,
-                    showFocalPoint: showFocalPoint
-                })
-            }),
-            doc && hasImageSizes && /*#__PURE__*/ _jsx(Drawer, {
-                className: `${baseClass}__previewDrawer`,
-                hoverTitle: true,
-                slug: sizePreviewSlug,
-                title: t('upload:sizesFor', {
-                    label: doc?.filename
-                }),
-                children: /*#__PURE__*/ _jsx(PreviewSizes, {
-                    doc: doc,
-                    imageCacheTag: doc.updatedAt,
-                    uploadConfig: uploadConfig
-                })
+        handleFileChange(file);
+      } catch (e_0) {
+        toast.error(e_0.message);
+      }
+    }
+  };
+  useEffect(() => {
+    setDoc(reduceFieldsToValues(initialState || {}, true));
+    if (initialState?.file?.value instanceof File) {
+      setFileSrc(URL.createObjectURL(initialState.file.value));
+    }
+    setReplacingFile(false);
+  }, [initialState]);
+  useEffect(() => {
+    if (showUrlInput && urlInputRef.current) {
+      // urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true
+    }
+  }, [showUrlInput]);
+  const canRemoveUpload = docPermissions?.update?.permission && 'delete' in docPermissions && docPermissions?.delete?.permission;
+  const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
+  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions);
+  // Explicity check if set to true, default is undefined
+  const focalPointEnabled = uploadConfig?.focalPoint === true;
+  const {
+    crop: showCrop = true,
+    focalPoint = true
+  } = uploadConfig;
+  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx(FieldError, {
+      field: null,
+      message: errorMessage,
+      showError: showError
+    }), doc.filename && !replacingFile && /*#__PURE__*/_jsx(FileDetails, {
+      collectionSlug: collectionSlug,
+      customUploadActions: customActions,
+      doc: doc,
+      enableAdjustments: showCrop || showFocalPoint,
+      handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
+      hasImageSizes: hasImageSizes,
+      imageCacheTag: doc.updatedAt,
+      uploadConfig: uploadConfig
+    }), (!doc.filename || replacingFile) && /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__upload`,
+      children: [!value && !showUrlInput && /*#__PURE__*/_jsx(Dropzone, {
+        onChange: handleFileSelection,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__dropzoneContent`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__dropzoneButtons`,
+            children: [/*#__PURE__*/_jsx(Button, {
+              buttonStyle: "pill",
+              onClick: () => {
+                if (inputRef.current) {
+                  inputRef.current.click();
+                }
+              },
+              size: "small",
+              children: t('upload:selectFile')
+            }), /*#__PURE__*/_jsx("input", {
+              "aria-hidden": "true",
+              className: `${baseClass}__hidden-input`,
+              hidden: true,
+              onChange: e_1 => {
+                if (e_1.target.files && e_1.target.files.length > 0) {
+                  handleFileSelection(e_1.target.files);
+                }
+              },
+              ref: inputRef,
+              type: "file"
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__orText`,
+              children: t('general:or')
+            }), /*#__PURE__*/_jsx(Button, {
+              buttonStyle: "pill",
+              onClick: () => {
+                setShowUrlInput(true);
+              },
+              size: "small",
+              children: t('upload:pasteURL')
+            })]
+          }), /*#__PURE__*/_jsxs("p", {
+            className: `${baseClass}__dragAndDropText`,
+            children: [t('general:or'), " ", t('upload:dragAndDrop')]
+          })]
+        })
+      }), showUrlInput && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__remote-file-wrap`,
+          children: [/*#__PURE__*/_jsx("input", {
+            className: `${baseClass}__remote-file`,
+            onChange: e_2 => {
+              setFileUrl(e_2.target.value);
+            },
+            ref: urlInputRef,
+            type: "text",
+            value: fileUrl
+          }), /*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__add-file-wrap`,
+            children: /*#__PURE__*/_jsx("button", {
+              className: `${baseClass}__add-file`,
+              onClick: () => {
+                void handleUrlSubmit();
+              },
+              type: "button",
+              children: t('upload:addFile')
             })
-        ]
-    });
+          })]
+        }), /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "icon-label",
+          className: `${baseClass}__remove`,
+          icon: "x",
+          iconStyle: "with-border",
+          onClick: () => {
+            setShowUrlInput(false);
+          },
+          round: true,
+          tooltip: t('general:cancel')
+        })]
+      }), value && fileSrc && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__thumbnail-wrap`,
+          children: /*#__PURE__*/_jsx(Thumbnail, {
+            collectionSlug: collectionSlug,
+            fileSrc: isImage(value.type) ? fileSrc : null
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__file-adjustments`,
+          children: [/*#__PURE__*/_jsx("input", {
+            className: `${baseClass}__filename`,
+            onChange: handleFileNameChange,
+            type: "text",
+            value: filename || value.name
+          }), /*#__PURE__*/_jsx(UploadActions, {
+            customActions: customActions,
+            enableAdjustments: showCrop || showFocalPoint,
+            enablePreviewSizes: hasImageSizes && doc.filename && !replacingFile,
+            mimeType: value.type
+          })]
+        }), /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "icon-label",
+          className: `${baseClass}__remove`,
+          icon: "x",
+          iconStyle: "with-border",
+          onClick: handleFileRemoval,
+          round: true,
+          tooltip: t('general:cancel')
+        })]
+      })]
+    }), (value || doc.filename) && /*#__PURE__*/_jsx(Drawer, {
+      Header: null,
+      slug: editDrawerSlug,
+      children: /*#__PURE__*/_jsx(EditUpload, {
+        fileName: value?.name || doc?.filename,
+        fileSrc: doc?.url || fileSrc,
+        imageCacheTag: doc.updatedAt,
+        initialCrop: uploadEdits?.crop ?? undefined,
+        initialFocalPoint: {
+          x: uploadEdits?.focalPoint?.x || doc.focalX || 50,
+          y: uploadEdits?.focalPoint?.y || doc.focalY || 50
+        },
+        onSave: onEditsSave,
+        showCrop: showCrop,
+        showFocalPoint: showFocalPoint
+      })
+    }), doc && hasImageSizes && /*#__PURE__*/_jsx(Drawer, {
+      className: `${baseClass}__previewDrawer`,
+      hoverTitle: true,
+      slug: sizePreviewSlug,
+      title: t('upload:sizesFor', {
+        label: doc?.filename
+      }),
+      children: /*#__PURE__*/_jsx(PreviewSizes, {
+        doc: doc,
+        imageCacheTag: doc.updatedAt,
+        uploadConfig: uploadConfig
+      })
+    })]
+  });
 };
-
+function _temp(CustomAction, i) {
+  return _jsx(React.Fragment, {
+    children: CustomAction
+  }, i);
+}
 //# sourceMappingURL=index.js.map