@payloadcms/ui 4.0.0-canary.26 → 4.0.0-canary.28

package/dist/elements/FileManager/index.js

@@ -1,16 +1,15 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { formatAdminURL, formatFilesize, isImage } from 'payload/shared';
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { toast } from 'sonner';
+import { formatFilesize, isImage } from 'payload/shared';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { FieldError } from '../../fields/FieldError/index.js';
 import { fieldBaseClass } from '../../fields/shared/index.js';
 import { TextInput } from '../../fields/Text/Input.js';
 import { useForm } from '../../forms/Form/index.js';
 import { useField } from '../../forms/useField/index.js';
-import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { EditDepthProvider } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -23,7 +22,10 @@ import { EditUpload } from '../EditUpload/index.js';
 import { PreviewSizes } from '../PreviewSizes/index.js';
 import { Thumbnail } from '../Thumbnail/index.js';
 import { editDrawerSlug, sizePreviewSlug } from '../Upload/index.js';
-import { pasteURLDrawerSlug, UploadFromURLModal } from '../Upload/UploadFromURLModal/index.js';
+import { UploadFromURLModal } from '../Upload/UploadFromURLModal/index.js';
+import { usePasteFromClipboard } from '../Upload/usePasteFromClipboard.js';
+import { useUploadFromUrl } from '../Upload/useUploadFromUrl.js';
+import { UploadDropzoneContent } from '../UploadDropzoneContent/index.js';
 import { AudioPreview } from './FilePreview/AudioPreview/index.js';
 import { FilePreview } from './FilePreview/index.js';
 import { PdfPreview } from './FilePreview/PdfPreview/index.js';
@@ -40,18 +42,19 @@ const validate = value => {
   }
   return true;
 };
-export const FileManager = ({
-  collectionSlug,
-  initialState,
-  resetUploadEdits: resetUploadEditsFromProps,
-  updateUploadEdits: updateUploadEditsFromProps,
-  uploadConfig,
-  UploadControls,
-  uploadEdits: uploadEditsFromProps,
-  UploadFilePreview
-}) => {
+export const FileManager = t0 => {
+  const $ = _c(56);
+  const {
+    collectionSlug,
+    initialState,
+    resetUploadEdits: resetUploadEditsFromProps,
+    updateUploadEdits: updateUploadEditsFromProps,
+    uploadConfig,
+    UploadControls,
+    uploadEdits: uploadEditsFromProps,
+    UploadFilePreview
+  } = t0;
   const {
-    closeModal,
     openModal
   } = useModal();
   const {
@@ -61,32 +64,29 @@ export const FileManager = ({
     setModified
   } = useForm();
   const {
-    id,
-    data,
-    setUploadStatus
+    data
   } = useDocumentInfo();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      path: "file",
+      validate
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
   const {
     errorMessage,
     setValue,
     showError,
     value
-  } = useField({
-    path: 'file',
-    validate
-  });
-  const {
-    config: {
-      routes: {
-        api
-      }
-    }
-  } = useConfig();
+  } = useField(t1);
   const {
     setUploadControlFile,
     setUploadControlFileName,
     setUploadControlFileUrl,
     uploadControlFile,
-    uploadControlFileName,
     uploadControlFileUrl
   } = useUploadControls();
   const uploadEditsContext = useUploadEdits();
@@ -95,245 +95,365 @@ export const FileManager = ({
   const uploadEdits = uploadEditsFromProps ?? uploadEditsContext.uploadEdits;
   const [fileSrc, setFileSrc] = useState(null);
   const [removedFile, setRemovedFile] = useState(false);
-  const [filename, setFilename] = useState(value?.name || '');
-  const [fileUrl, setFileUrl] = useState('');
+  const [filename, setFilename] = useState(value?.name || "");
   const [selectedSize, setSelectedSize] = useState(null);
-  const inputRef = useRef(null);
-  const useServerSideFetch = typeof uploadConfig?.pasteURL === 'object' && uploadConfig.pasteURL.allowList?.length > 0;
-  const acceptMimeTypes = uploadConfig.mimeTypes?.join(', ');
+  const acceptMimeTypes = uploadConfig.mimeTypes?.join(", ");
   const imageCacheTag = uploadConfig?.cacheTags && data?.updatedAt;
   const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
   const hasResizeOptions = Boolean(uploadConfig?.resizeOptions);
   const focalPointEnabled = uploadConfig?.focalPoint === true;
   const {
-    crop: showCrop = true,
-    focalPoint = true
+    crop: t2,
+    focalPoint: t3
   } = uploadConfig;
+  const showCrop = t2 === undefined ? true : t2;
+  const focalPoint = t3 === undefined ? true : t3;
   const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
   const selectedSizeData = selectedSize ? data?.sizes?.[selectedSize] : null;
   const sidePanelFileSrc = selectedSizeData?.url ?? data?.thumbnailURL ?? data?.url ?? null;
   const sidePanelMimeType = data?.mimeType;
-  const fileTypeIsAdjustable = !!sidePanelMimeType && isImage(sidePanelMimeType) && sidePanelMimeType !== 'image/svg+xml' && sidePanelMimeType !== 'image/jxl';
-  const renameFile = (fileToChange, newName) => new File([fileToChange], newName, {
-    type: fileToChange.type,
-    lastModified: fileToChange.lastModified
-  });
-  const handleFileChange = useCallback(({
-    file,
-    isNewFile = true
-  }) => {
-    if (isNewFile && file instanceof File) {
-      setFileSrc(URL.createObjectURL(file));
-    }
-    setValue(file);
-    setUploadControlFileUrl('');
-    setUploadControlFileName(null);
-    setUploadControlFile(null);
-  }, [setValue, setUploadControlFile, setUploadControlFileName, setUploadControlFileUrl]);
-  const handleFileNameChange = useCallback(e => {
-    const updatedFileName = e.target.value;
-    if (value) {
-      handleFileChange({
-        file: renameFile(value, updatedFileName),
-        isNewFile: false
-      });
-      setFilename(updatedFileName);
-    }
-  }, [handleFileChange, value]);
-  const handleFileRemoval = useCallback(() => {
-    setRemovedFile(true);
-    handleFileChange({
-      file: null
-    });
-    setFileSrc('');
-    setFileUrl('');
-    setSelectedSize(null);
-    resetUploadEdits();
-    setUploadControlFileUrl('');
-    setUploadControlFileName(null);
-    setUploadControlFile(null);
-  }, [handleFileChange, resetUploadEdits, setUploadControlFile, setUploadControlFileName, setUploadControlFileUrl]);
-  const handleFileSelection = useCallback(files => handleFileChange({
-    file: files?.[0]
-  }), [handleFileChange]);
-  const isValidUrl = Boolean(fileUrl && URL.canParse(fileUrl));
-  const handleUrlSubmit = useCallback(async () => {
-    if (!fileUrl || !URL.canParse(fileUrl) || uploadConfig?.pasteURL === false) {
-      return;
-    }
-    setUploadStatus('uploading');
-    try {
-      const clientResponse = await fetch(fileUrl);
-      if (!clientResponse.ok) {
-        throw new Error(`Fetch failed: ${clientResponse.status}`);
-      }
-      const blob = await clientResponse.blob();
-      const rawSegment = fileUrl.split('/').pop() || '';
-      const fileName = uploadControlFileName || decodeURIComponent(rawSegment.split('?')[0]);
-      handleFileChange({
-        file: new File([blob], fileName, {
-          type: blob.type
-        })
-      });
-      setUploadStatus('idle');
-      closeModal(pasteURLDrawerSlug);
-      setFileUrl('');
-      return;
-    } catch (_clientError) {
-      if (!useServerSideFetch) {
-        toast.error('Failed to fetch the file.');
-        setUploadStatus('failed');
-        return;
+  const fileTypeIsAdjustable = !!sidePanelMimeType && isImage(sidePanelMimeType) && sidePanelMimeType !== "image/svg+xml" && sidePanelMimeType !== "image/jxl";
+  const renameFile = _temp;
+  let t4;
+  if ($[1] !== setUploadControlFile || $[2] !== setUploadControlFileName || $[3] !== setUploadControlFileUrl || $[4] !== setValue) {
+    t4 = t5 => {
+      const {
+        file,
+        isNewFile: t6
+      } = t5;
+      const isNewFile = t6 === undefined ? true : t6;
+      if (isNewFile && file instanceof File) {
+        setFileSrc(URL.createObjectURL(file));
       }
-    }
-    try {
-      const pasteURL = `/${collectionSlug}/paste-url${id ? `/${id}?` : '?'}src=${encodeURIComponent(fileUrl)}`;
-      const serverResponse = await fetch(formatAdminURL({
-        apiRoute: api,
-        path: pasteURL
-      }));
-      if (!serverResponse.ok) {
-        throw new Error(`Fetch failed: ${serverResponse.status}`);
+      setValue(file);
+      setUploadControlFileUrl("");
+      setUploadControlFileName(null);
+      setUploadControlFile(null);
+    };
+    $[1] = setUploadControlFile;
+    $[2] = setUploadControlFileName;
+    $[3] = setUploadControlFileUrl;
+    $[4] = setValue;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const handleFileChange = t4;
+  let t5;
+  if ($[6] !== handleFileChange || $[7] !== value) {
+    t5 = e => {
+      const updatedFileName = e.target.value;
+      if (value) {
+        handleFileChange({
+          file: renameFile(value, updatedFileName),
+          isNewFile: false
+        });
+        setFilename(updatedFileName);
       }
-      const blob_0 = await serverResponse.blob();
-      const rawSegment_0 = fileUrl.split('/').pop() || '';
-      const fileName_0 = decodeURIComponent(rawSegment_0.split('?')[0]);
+    };
+    $[6] = handleFileChange;
+    $[7] = value;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const handleFileNameChange = t5;
+  let t6;
+  if ($[9] !== handleFileChange) {
+    t6 = files => handleFileChange({
+      file: files?.[0]
+    });
+    $[9] = handleFileChange;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  const handleFileSelection = t6;
+  let t7;
+  if ($[11] !== handleFileChange) {
+    t7 = file_0 => handleFileChange({
+      file: file_0
+    });
+    $[11] = handleFileChange;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  const handleFileFetchedFromUrl = t7;
+  let t8;
+  if ($[13] !== collectionSlug || $[14] !== handleFileFetchedFromUrl || $[15] !== uploadConfig) {
+    t8 = {
+      collectionSlug,
+      onFileFetched: handleFileFetchedFromUrl,
+      uploadConfig
+    };
+    $[13] = collectionSlug;
+    $[14] = handleFileFetchedFromUrl;
+    $[15] = uploadConfig;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const {
+    fileUrl,
+    handleUrlSubmit,
+    isValidUrl,
+    setFileUrl
+  } = useUploadFromUrl(t8);
+  let t9;
+  if ($[17] !== handleFileSelection || $[18] !== handleUrlSubmit || $[19] !== setFileUrl || $[20] !== uploadConfig) {
+    t9 = {
+      handleFileSelection,
+      handleUrlSubmit,
+      setFileUrl,
+      uploadConfig
+    };
+    $[17] = handleFileSelection;
+    $[18] = handleUrlSubmit;
+    $[19] = setFileUrl;
+    $[20] = uploadConfig;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  const handlePasteFromClipboard = usePasteFromClipboard(t9);
+  let t10;
+  if ($[22] !== handleFileChange || $[23] !== resetUploadEdits || $[24] !== setFileUrl || $[25] !== setUploadControlFile || $[26] !== setUploadControlFileName || $[27] !== setUploadControlFileUrl) {
+    t10 = () => {
+      setRemovedFile(true);
       handleFileChange({
-        file: new File([blob_0], fileName_0, {
-          type: blob_0.type
-        })
+        file: null
       });
-      setUploadStatus('idle');
-      closeModal(pasteURLDrawerSlug);
-      setFileUrl('');
-    } catch (_serverError) {
-      toast.error('The provided URL is not allowed.');
-      setUploadStatus('failed');
-    }
-  }, [api, closeModal, collectionSlug, fileUrl, handleFileChange, id, setUploadStatus, uploadConfig, uploadControlFileName, useServerSideFetch]);
-  const onEditsSave = useCallback(args => {
-    setModified(true);
-    updateUploadEdits(args);
-  }, [setModified, updateUploadEdits]);
-  // Reset states for when replacing the file with a new upload
-  useEffect(() => {
-    setSelectedSize(null);
-    setRemovedFile(false);
-    setFileSrc('');
-  }, [data?.url, data?.filename]);
-  useEffect(() => {
-    if (initialState?.file?.value instanceof File) {
-      setFileSrc(URL.createObjectURL(initialState.file.value));
+      setFileSrc("");
+      setFileUrl("");
+      setSelectedSize(null);
+      resetUploadEdits();
+      setUploadControlFileUrl("");
+      setUploadControlFileName(null);
+      setUploadControlFile(null);
+    };
+    $[22] = handleFileChange;
+    $[23] = resetUploadEdits;
+    $[24] = setFileUrl;
+    $[25] = setUploadControlFile;
+    $[26] = setUploadControlFileName;
+    $[27] = setUploadControlFileUrl;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  const handleFileRemoval = t10;
+  let t11;
+  if ($[29] !== setModified || $[30] !== updateUploadEdits) {
+    t11 = args => {
+      setModified(true);
+      updateUploadEdits(args);
+    };
+    $[29] = setModified;
+    $[30] = updateUploadEdits;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  const onEditsSave = t11;
+  let t12;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => {
+      setSelectedSize(null);
       setRemovedFile(false);
-    }
-  }, [initialState]);
-  useEffect(() => {
-    return () => {
-      if (fileSrc?.startsWith('blob:')) {
+      setFileSrc("");
+    };
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  const t13 = data?.url;
+  const t14 = data?.filename;
+  let t15;
+  if ($[33] !== t13 || $[34] !== t14) {
+    t15 = [t13, t14];
+    $[33] = t13;
+    $[34] = t14;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  useEffect(t12, t15);
+  let t16;
+  let t17;
+  if ($[36] !== initialState) {
+    t16 = () => {
+      if (initialState?.file?.value instanceof File) {
+        setFileSrc(URL.createObjectURL(initialState.file.value));
+        setRemovedFile(false);
+      }
+    };
+    t17 = [initialState];
+    $[36] = initialState;
+    $[37] = t16;
+    $[38] = t17;
+  } else {
+    t16 = $[37];
+    t17 = $[38];
+  }
+  useEffect(t16, t17);
+  let t18;
+  let t19;
+  if ($[39] !== fileSrc) {
+    t18 = () => () => {
+      if (fileSrc?.startsWith("blob:")) {
         URL.revokeObjectURL(fileSrc);
       }
     };
-  }, [fileSrc]);
-  useEffect(() => {
-    const handleControlFileUrl = async () => {
-      if (uploadControlFileUrl) {
-        setFileUrl(uploadControlFileUrl);
-        await handleUrlSubmit();
+    t19 = [fileSrc];
+    $[39] = fileSrc;
+    $[40] = t18;
+    $[41] = t19;
+  } else {
+    t18 = $[40];
+    t19 = $[41];
+  }
+  useEffect(t18, t19);
+  let t20;
+  let t21;
+  if ($[42] !== handleUrlSubmit || $[43] !== setFileUrl || $[44] !== uploadControlFileUrl) {
+    t20 = () => {
+      const handleControlFileUrl = async () => {
+        if (uploadControlFileUrl) {
+          setFileUrl(uploadControlFileUrl);
+          await handleUrlSubmit();
+        }
+      };
+      handleControlFileUrl();
+    };
+    t21 = [uploadControlFileUrl, handleUrlSubmit, setFileUrl];
+    $[42] = handleUrlSubmit;
+    $[43] = setFileUrl;
+    $[44] = uploadControlFileUrl;
+    $[45] = t20;
+    $[46] = t21;
+  } else {
+    t20 = $[45];
+    t21 = $[46];
+  }
+  useEffect(t20, t21);
+  let t22;
+  let t23;
+  if ($[47] !== handleFileChange || $[48] !== uploadControlFile) {
+    t22 = () => {
+      if (uploadControlFile) {
+        handleFileChange({
+          file: uploadControlFile
+        });
       }
     };
-    void handleControlFileUrl();
-  }, [uploadControlFileUrl, handleUrlSubmit]);
-  useEffect(() => {
-    if (uploadControlFile) {
-      handleFileChange({
-        file: uploadControlFile
-      });
-    }
-  }, [uploadControlFile, handleFileChange]);
-  // Preview a freshly-selected (not-yet-saved) file from its local object URL, so video/audio/PDF
-  // are playable/viewable just like images. Sizing is capped in CSS so large files stay contained.
-  const renderSelectedFilePreview = src => {
-    const fileType = value?.type ?? '';
-    if (fileType.startsWith('video/')) {
-      return /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__selected-preview`,
-        children: /*#__PURE__*/_jsx(VideoPreview, {
-          fileSrc: src
-        })
-      });
-    }
-    if (fileType.startsWith('audio/')) {
-      return /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__selected-preview ${baseClass}__selected-preview--audio`,
-        children: /*#__PURE__*/_jsx(AudioPreview, {
-          fileSrc: src
-        })
-      });
-    }
-    if (fileType === 'application/pdf') {
-      return /*#__PURE__*/_jsx("div", {
+    t23 = [uploadControlFile, handleFileChange];
+    $[47] = handleFileChange;
+    $[48] = uploadControlFile;
+    $[49] = t22;
+    $[50] = t23;
+  } else {
+    t22 = $[49];
+    t23 = $[50];
+  }
+  useEffect(t22, t23);
+  let t24;
+  if ($[51] !== collectionSlug || $[52] !== value?.name || $[53] !== value?.type) {
+    t24 = src => {
+      const fileType = value?.type ?? "";
+      if (fileType.startsWith("video/")) {
+        return _jsx("div", {
+          className: `${baseClass}__selected-preview`,
+          children: _jsx(VideoPreview, {
+            fileSrc: src
+          })
+        });
+      }
+      if (fileType.startsWith("audio/")) {
+        return _jsx("div", {
+          className: `${baseClass}__selected-preview ${baseClass}__selected-preview--audio`,
+          children: _jsx(AudioPreview, {
+            fileSrc: src
+          })
+        });
+      }
+      if (fileType === "application/pdf") {
+        return _jsx("div", {
+          className: `${baseClass}__selected-preview`,
+          children: _jsx(PdfPreview, {
+            fileSrc: src,
+            title: value?.name
+          })
+        });
+      }
+      return _jsx("div", {
         className: `${baseClass}__selected-preview`,
-        children: /*#__PURE__*/_jsx(PdfPreview, {
-          fileSrc: src,
-          title: value?.name
+        children: _jsx(Thumbnail, {
+          collectionSlug,
+          fileSrc: isImage(fileType) ? src : null,
+          size: "expand"
         })
       });
-    }
-    return /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__selected-preview`,
-      children: /*#__PURE__*/_jsx(Thumbnail, {
-        collectionSlug: collectionSlug,
-        fileSrc: isImage(fileType) ? src : null,
-        size: "expand"
-      })
-    });
-  };
-  const drawers = /*#__PURE__*/_jsxs(Fragment, {
-    children: [(value || data?.filename) && /*#__PURE__*/_jsx(EditDepthProvider, {
-      children: /*#__PURE__*/_jsx(EditUpload, {
+    };
+    $[51] = collectionSlug;
+    $[52] = value?.name;
+    $[53] = value?.type;
+    $[54] = t24;
+  } else {
+    t24 = $[54];
+  }
+  const renderSelectedFilePreview = t24;
+  const drawers = _jsxs(Fragment, {
+    children: [(value || data?.filename) && _jsx(EditDepthProvider, {
+      children: _jsx(EditUpload, {
         fileName: value?.name || data?.filename,
         fileSrc: data?.url || fileSrc,
-        imageCacheTag: imageCacheTag,
+        imageCacheTag,
         initialCrop: uploadEdits?.crop ?? undefined,
         initialFocalPoint: {
           x: uploadEdits?.focalPoint?.x || data?.focalX || 50,
           y: uploadEdits?.focalPoint?.y || data?.focalY || 50
         },
         onSave: onEditsSave,
-        showCrop: showCrop,
-        showFocalPoint: showFocalPoint
+        showCrop,
+        showFocalPoint
       })
-    }), data && hasImageSizes && /*#__PURE__*/_jsx(Drawer, {
+    }), data && hasImageSizes && _jsx(Drawer, {
       className: `${baseClass}__preview-drawer`,
       hoverTitle: true,
       slug: sizePreviewSlug,
-      title: t('upload:sizesFor', {
+      title: t("upload:sizesFor", {
         label: data.filename
       }),
-      children: /*#__PURE__*/_jsx(PreviewSizes, {
+      children: _jsx(PreviewSizes, {
         doc: data,
-        imageCacheTag: imageCacheTag,
-        uploadConfig: uploadConfig
+        imageCacheTag,
+        uploadConfig
       })
-    }), uploadConfig?.pasteURL !== false && /*#__PURE__*/_jsx(UploadFromURLModal, {
-      fileUrl: fileUrl,
-      handleUrlSubmit: handleUrlSubmit,
-      isValidUrl: isValidUrl,
-      setFileUrl: setFileUrl
+    }), uploadConfig?.pasteURL !== false && _jsx(UploadFromURLModal, {
+      fileUrl,
+      handleUrlSubmit,
+      isValidUrl,
+      setFileUrl
     })]
   });
-  // Hide the create file input when the collection opts out of it (unless the user has explicitly
-  // removed an existing file or already selected a new one).
   const showUploadInput = Boolean(value) || removedFile || !uploadConfig?.hideFileInputOnCreate;
-  return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, baseClass].filter(Boolean).join(' '),
-    children: [/*#__PURE__*/_jsx(FieldError, {
+  let t25;
+  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+    t25 = [fieldBaseClass, baseClass].filter(Boolean);
+    $[55] = t25;
+  } else {
+    t25 = $[55];
+  }
+  return _jsxs("div", {
+    className: t25.join(" "),
+    children: [_jsx(FieldError, {
       message: errorMessage,
       path: "filename",
-      showError: showError
-    }), /*#__PURE__*/_jsxs("div", {
+      showError
+    }), _jsxs("div", {
       className: `${baseClass}__panel`,
-      children: [data?.filename && !removedFile && /*#__PURE__*/_jsx(FileToolbar, {
+      children: [data?.filename && !removedFile && _jsx(FileToolbar, {
         filename: data.filename,
         fileSrc: sidePanelFileSrc,
         fileUrl: data?.url,
@@ -341,89 +461,55 @@ export const FileManager = ({
         isAdjustable: fileTypeIsAdjustable,
         onEditImage: () => openModal(editDrawerSlug),
         onReplace: handleFileRemoval
-      }), /*#__PURE__*/_jsx("div", {
+      }), _jsx("div", {
         className: `${baseClass}__content`,
-        children: data?.filename && !removedFile ? /*#__PURE__*/_jsx(FilePreview, {
-          collectionSlug: collectionSlug,
-          data: data,
-          imageCacheTag: imageCacheTag,
-          selectedSize: selectedSize,
-          selectedSizeData: selectedSizeData,
-          setSelectedSize: setSelectedSize,
-          uploadConfig: uploadConfig,
-          UploadFilePreview: UploadFilePreview
-        }) : showUploadInput ? /*#__PURE__*/_jsxs("div", {
+        children: data?.filename && !removedFile ? _jsx(FilePreview, {
+          collectionSlug,
+          data,
+          imageCacheTag,
+          selectedSize,
+          selectedSizeData,
+          setSelectedSize,
+          uploadConfig,
+          UploadFilePreview
+        }) : showUploadInput ? _jsxs("div", {
           className: `${baseClass}__upload`,
-          children: [!value && removedFile && data?.filename && /*#__PURE__*/_jsx(Button, {
+          children: [!value && removedFile && data?.filename && _jsx(Button, {
             buttonStyle: "secondary",
             className: `${baseClass}__remove`,
             icon: "x",
             onClick: () => setRemovedFile(false),
             round: true,
-            tooltip: t('general:cancel')
-          }), !value && /*#__PURE__*/_jsx(Dropzone, {
+            tooltip: t("general:cancel")
+          }), !value && _jsx(Dropzone, {
             onChange: handleFileSelection,
-            children: /*#__PURE__*/_jsxs("div", {
-              className: `${baseClass}__dropzone-content`,
-              children: [/*#__PURE__*/_jsxs("div", {
-                className: `${baseClass}__dropzone-buttons`,
-                children: [/*#__PURE__*/_jsx(Button, {
-                  buttonStyle: "secondary",
-                  onClick: () => inputRef.current?.click(),
-                  size: "medium",
-                  children: t('upload:selectFile')
-                }), /*#__PURE__*/_jsx("input", {
-                  accept: acceptMimeTypes,
-                  "aria-hidden": "true",
-                  className: `${baseClass}__hidden-input`,
-                  hidden: true,
-                  onChange: e_0 => {
-                    if (e_0.target.files && e_0.target.files.length > 0) {
-                      handleFileSelection(e_0.target.files);
-                    }
-                  },
-                  ref: inputRef,
-                  type: "file"
-                }), uploadConfig?.pasteURL !== false && /*#__PURE__*/_jsxs(Fragment, {
-                  children: [/*#__PURE__*/_jsx("span", {
-                    className: `${baseClass}__or-text`,
-                    children: t('general:or')
-                  }), /*#__PURE__*/_jsx(Button, {
-                    buttonStyle: "secondary",
-                    onClick: () => {
-                      openModal(pasteURLDrawerSlug);
-                      setUploadControlFileUrl('');
-                      setUploadControlFile(null);
-                      setUploadControlFileName(null);
-                    },
-                    size: "medium",
-                    children: t('upload:pasteURL')
-                  })]
-                }), UploadControls ?? null]
-              }), /*#__PURE__*/_jsxs("p", {
-                className: `${baseClass}__drag-text`,
-                children: [t('general:or'), " ", t('upload:dragAndDrop')]
-              })]
+            children: _jsx(UploadDropzoneContent, {
+              acceptMimeTypes,
+              extraControls: UploadControls,
+              onFilesSelected: handleFileSelection,
+              onPasteFromClipboard: handlePasteFromClipboard,
+              pasteButtonClassName: `${baseClass}__pasteFromClipboard`,
+              pasteTooltip: t("upload:pasteURL")
             })
-          }), value && fileSrc && /*#__PURE__*/_jsxs(Fragment, {
-            children: [/*#__PURE__*/_jsx(Button, {
+          }), value && fileSrc && _jsxs(Fragment, {
+            children: [_jsx(Button, {
               buttonStyle: "secondary",
               className: `${baseClass}__remove`,
               icon: "x",
               onClick: handleFileRemoval,
               round: true,
-              tooltip: t('general:cancel')
-            }), renderSelectedFilePreview(fileSrc), /*#__PURE__*/_jsxs("div", {
+              tooltip: t("general:cancel")
+            }), renderSelectedFilePreview(fileSrc), _jsxs("div", {
               className: `${baseClass}__file-adjustments`,
-              children: [/*#__PURE__*/_jsx(TextInput, {
+              children: [_jsx(TextInput, {
                 id: "field-filemanager-filename",
-                label: t('upload:fileName'),
+                label: t("upload:fileName"),
                 onChange: handleFileNameChange,
                 path: "filename",
                 value: filename || value.name
-              }), (value.size || value.type) && /*#__PURE__*/_jsx("span", {
+              }), (value.size || value.type) && _jsx("span", {
                 className: `${baseClass}__selected-meta`,
-                children: [value.size ? formatFilesize(value.size) : null, value.type].filter(Boolean).join(' – ')
+                children: [value.size ? formatFilesize(value.size) : null, value.type].filter(Boolean).join(" \u2013 ")
               })]
             })]
           })]
@@ -432,4 +518,10 @@ export const FileManager = ({
     }), drawers]
   });
 };
+function _temp(fileToChange, newName) {
+  return new File([fileToChange], newName, {
+    type: fileToChange.type,
+    lastModified: fileToChange.lastModified
+  });
+}
 //# sourceMappingURL=index.js.map