@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.cd69eef

package/dist/elements/FileManager/FileToolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useRef","useElementHeightVariable","ChevronIcon","CropIcon","DownloadIcon","NewTabIcon","SwapIcon","useTranslation","Button","CopyToClipboard","Popup","PopupList","baseClass","FileToolbar","filename","fileSrc","fileUrl","hideRemoveFile","isAdjustable","onEditImage","onReplace","t","ref","cssVar","_jsxs","className","_jsx","button","size","buttonType","horizontalAlign","portalClassName","verticalAlign","MenuItem","icon","onClick","value","buttonStyle","margin","round","tooltip","href","rel","target","title","download"],"sources":["../../../../src/elements/FileManager/FileToolbar/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef } from 'react'\n\nimport { useElementHeightVariable } from '../../../hooks/useElementHeightVariable.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { CropIcon } from '../../../icons/Crop/index.js'\nimport { DownloadIcon } from '../../../icons/Download/index.js'\nimport { NewTabIcon } from '../../../icons/NewTab/index.js'\nimport { SwapIcon } from '../../../icons/Swap/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport * as PopupList from '../../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'file-toolbar'\n\ntype Props = {\n  readonly filename: string\n  readonly fileSrc?: null | string\n  readonly fileUrl?: null | string\n  readonly hideRemoveFile?: boolean\n  readonly isAdjustable?: boolean\n  readonly onEditImage?: () => void\n  readonly onReplace?: () => void\n}\n\nexport const FileToolbar: React.FC<Props> = ({\n  filename,\n  fileSrc,\n  fileUrl,\n  hideRemoveFile,\n  isAdjustable,\n  onEditImage,\n  onReplace,\n}) => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLDivElement>(null)\n  useElementHeightVariable({ cssVar: '--file-toolbar-height', ref })\n\n  return (\n    <div className={baseClass} ref={ref}>\n      <div className={`${baseClass}__left`}>\n        {hideRemoveFile ? (\n          <span className={`${baseClass}__filename-btn ${baseClass}__filename-btn--static`}>\n            <span className={`${baseClass}__filename-text`}>{filename}</span>\n          </span>\n        ) : (\n          <Popup\n            button={\n              <span className={`${baseClass}__filename-btn`}>\n                <span className={`${baseClass}__filename-text`}>{filename}</span>\n                <ChevronIcon size={16} />\n              </span>\n            }\n            buttonType=\"custom\"\n            horizontalAlign=\"left\"\n            portalClassName={`${baseClass}__filename-popup`}\n            size=\"fit-content\"\n            verticalAlign=\"bottom\"\n          >\n            <PopupList.MenuItem>\n              <PopupList.Button icon={<SwapIcon />} onClick={onReplace}>\n                {t('upload:replaceFile')}\n              </PopupList.Button>\n            </PopupList.MenuItem>\n          </Popup>\n        )}\n      </div>\n\n      <div className={`${baseClass}__right`}>\n        {fileUrl && <CopyToClipboard value={fileUrl} />}\n        {isAdjustable && (\n          <Button\n            aria-label={t('upload:editImage')}\n            buttonStyle=\"ghost\"\n            icon={<CropIcon size={24} />}\n            margin={false}\n            onClick={onEditImage}\n            round={false}\n            tooltip={t('upload:editImage')}\n          />\n        )}\n        {fileSrc && (\n          <a\n            aria-label={t('fields:openInNewTab')}\n            className={`${baseClass}__icon-link`}\n            href={fileSrc}\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n            title={t('fields:openInNewTab')}\n          >\n            <NewTabIcon size={24} />\n          </a>\n        )}\n        {fileSrc && (\n          <a\n            aria-label={t('upload:download')}\n            className={`${baseClass}__icon-link`}\n            download={filename}\n            href={fileSrc}\n            title={t('upload:download')}\n          >\n            <DownloadIcon size={24} />\n          </a>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FileManager/index.css

@@ -0,0 +1,154 @@
+@layer payload-default {
+  .file-manager {
+    position: relative;
+    flex: 1 0 0;
+    align-self: stretch;
+    width: 100%;
+    margin-bottom: 0;
+    border-radius: 0;
+    background: var(--color-bg-secondary);
+    min-height: 100px;
+
+    .dropzone {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .file-manager__panel {
+    position: sticky;
+    top: var(--doc-controls-height);
+    height: calc(
+      100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height)
+    );
+    display: flex;
+    flex-direction: column;
+    /* Visible so the mini carousel can grow past the panel to fill the area left behind as the
+       app/doc headers scroll away (see MiniCarousel). */
+    overflow: visible;
+    /* Scroll-driven: grow height as the app header and doc header scroll away, matching the
+       extra space they free up. Mirrors the MiniCarousel approach. Falls back to static height. */
+  }
+
+  .file-manager__content {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .file-manager__upload {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-4);
+    position: relative;
+  }
+
+  /* Fill the whole upload area so a file can be dropped onto any part of the file manager,
+     not just the band occupied by the dropzone's buttons. */
+  .file-manager__upload .dropzone {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .file-manager__remove {
+    position: absolute;
+    top: var(--spacer-2);
+    right: var(--spacer-2);
+    margin: 0;
+    z-index: 1;
+  }
+
+  /* Preview of a freshly-selected (not-yet-saved) file. Capped so large media stays contained;
+     the definite height lets the PDF iframe / video / image fill it. */
+  .file-manager__selected-preview {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 420px;
+    height: min(50dvh, 320px);
+    overflow: hidden;
+    border-radius: var(--radius-small);
+  }
+
+  /* Audio is just a player bar — no tall box needed. */
+  .file-manager__selected-preview--audio {
+    height: auto;
+  }
+
+  .file-manager__selected-preview .thumbnail img,
+  .file-manager__selected-preview .thumbnail svg {
+    object-fit: contain;
+  }
+
+  .file-manager__file-adjustments {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    margin-bottom: var(--spacer-2);
+  }
+
+  .file-manager__selected-meta {
+    color: var(--color-text-tertiary);
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    line-height: var(--text-body-small-line-height);
+  }
+
+  .file-manager__hidden-input {
+    display: none;
+  }
+
+  .file-manager__dropzone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacer-2);
+    width: 100%;
+  }
+
+  .file-manager__dropzone-buttons {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  .file-manager__or-text {
+    color: var(--color-text-tertiary);
+    text-transform: lowercase;
+  }
+
+  .file-manager__drag-text {
+    flex-shrink: 0;
+    margin: 0;
+    text-transform: lowercase;
+    color: var(--color-text-tertiary);
+  }
+
+  @container edit-main (max-width: 1024px) {
+    .file-manager {
+      min-height: 400px;
+      border-bottom: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    .file-manager__panel {
+      position: static;
+      height: auto;
+      min-height: 400px;
+    }
+
+    .file-manager__content {
+      flex-direction: column;
+    }
+  }
+}

package/dist/elements/FileManager/index.d.ts

@@ -0,0 +1,19 @@
+import type { SanitizedCollectionConfig, UploadEdits } from 'payload';
+import React from 'react';
+import './index.css';
+export type FileManagerProps = {
+    readonly collectionSlug: string;
+    readonly initialState?: import('payload').FormState;
+    /**
+     * When provided, upload edits are sourced from these props instead of the `useUploadEdits`
+     * context. The bulk upload drawer uses this to drive per-file edits from its FormsManager.
+     */
+    readonly resetUploadEdits?: () => void;
+    readonly updateUploadEdits?: (args: UploadEdits) => void;
+    readonly uploadConfig: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>;
+    readonly UploadControls?: React.ReactNode;
+    readonly uploadEdits?: UploadEdits;
+    readonly UploadFilePreview?: React.ReactNode;
+};
+export declare const FileManager: React.FC<FileManagerProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileManager/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIrE,OAAO,KAA6D,MAAM,OAAO,CAAA;AA2BjF,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,SAAS,EAAE,SAAS,CAAA;IACnD;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAA;IACtF,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7C,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqalD,CAAA"}

package/dist/elements/FileManager/index.js

@@ -0,0 +1,424 @@
+'use client';
+
+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 { 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';
+import { useUploadControls } from '../../providers/UploadControls/index.js';
+import { useUploadEdits } from '../../providers/UploadEdits/index.js';
+import { Button } from '../Button/index.js';
+import { Drawer } from '../Drawer/index.js';
+import { Dropzone } from '../Dropzone/index.js';
+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 { AudioPreview } from './FilePreview/AudioPreview/index.js';
+import { FilePreview } from './FilePreview/index.js';
+import { PdfPreview } from './FilePreview/PdfPreview/index.js';
+import { VideoPreview } from './FilePreview/VideoPreview/index.js';
+import { FileToolbar } from './FileToolbar/index.js';
+import './index.css';
+const baseClass = 'file-manager';
+const validate = value => {
+  if (!value && value !== undefined) {
+    return 'A file is required.';
+  }
+  if (value && (!value.name || value.name === '')) {
+    return 'A file name is required.';
+  }
+  return true;
+};
+export const FileManager = ({
+  collectionSlug,
+  initialState,
+  resetUploadEdits: resetUploadEditsFromProps,
+  updateUploadEdits: updateUploadEditsFromProps,
+  uploadConfig,
+  UploadControls,
+  uploadEdits: uploadEditsFromProps,
+  UploadFilePreview
+}) => {
+  const {
+    closeModal,
+    openModal
+  } = useModal();
+  const {
+    t
+  } = useTranslation();
+  const {
+    setModified
+  } = useForm();
+  const {
+    id,
+    data,
+    setUploadStatus
+  } = useDocumentInfo();
+  const {
+    errorMessage,
+    setValue,
+    showError,
+    value
+  } = useField({
+    path: 'file',
+    validate
+  });
+  const {
+    config: {
+      routes: {
+        api
+      }
+    }
+  } = useConfig();
+  const {
+    setUploadControlFile,
+    setUploadControlFileName,
+    setUploadControlFileUrl,
+    uploadControlFile,
+    uploadControlFileName,
+    uploadControlFileUrl
+  } = useUploadControls();
+  const uploadEditsContext = useUploadEdits();
+  const resetUploadEdits = resetUploadEditsFromProps ?? uploadEditsContext.resetUploadEdits;
+  const updateUploadEdits = updateUploadEditsFromProps ?? uploadEditsContext.updateUploadEdits;
+  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 [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 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
+  } = uploadConfig;
+  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;
+      }
+    }
+    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}`);
+      }
+      const blob_0 = await serverResponse.blob();
+      const rawSegment_0 = fileUrl.split('/').pop() || '';
+      const fileName_0 = decodeURIComponent(rawSegment_0.split('?')[0]);
+      handleFileChange({
+        file: new File([blob_0], fileName_0, {
+          type: blob_0.type
+        })
+      });
+      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]);
+  useEffect(() => {
+    if (initialState?.file?.value instanceof File) {
+      setFileSrc(URL.createObjectURL(initialState.file.value));
+      setRemovedFile(false);
+    }
+  }, [initialState]);
+  useEffect(() => {
+    return () => {
+      if (fileSrc?.startsWith('blob:')) {
+        URL.revokeObjectURL(fileSrc);
+      }
+    };
+  }, [fileSrc]);
+  useEffect(() => {
+    setSelectedSize(null);
+  }, [data?.url, data?.filename]);
+  useEffect(() => {
+    const handleControlFileUrl = async () => {
+      if (uploadControlFileUrl) {
+        setFileUrl(uploadControlFileUrl);
+        await handleUrlSubmit();
+      }
+    };
+    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", {
+        className: `${baseClass}__selected-preview`,
+        children: /*#__PURE__*/_jsx(PdfPreview, {
+          fileSrc: src,
+          title: value?.name
+        })
+      });
+    }
+    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, {
+        fileName: value?.name || data?.filename,
+        fileSrc: data?.url || fileSrc,
+        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
+      })
+    }), data && hasImageSizes && /*#__PURE__*/_jsx(Drawer, {
+      className: `${baseClass}__preview-drawer`,
+      hoverTitle: true,
+      slug: sizePreviewSlug,
+      title: t('upload:sizesFor', {
+        label: data.filename
+      }),
+      children: /*#__PURE__*/_jsx(PreviewSizes, {
+        doc: data,
+        imageCacheTag: imageCacheTag,
+        uploadConfig: uploadConfig
+      })
+    }), uploadConfig?.pasteURL !== false && /*#__PURE__*/_jsx(UploadFromURLModal, {
+      fileUrl: fileUrl,
+      handleUrlSubmit: handleUrlSubmit,
+      isValidUrl: isValidUrl,
+      setFileUrl: 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, {
+      message: errorMessage,
+      showError: showError
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__panel`,
+      children: [data?.filename && !removedFile && /*#__PURE__*/_jsx(FileToolbar, {
+        filename: data.filename,
+        fileSrc: sidePanelFileSrc,
+        fileUrl: data?.url,
+        hideRemoveFile: uploadConfig?.hideRemoveFile,
+        isAdjustable: fileTypeIsAdjustable,
+        onEditImage: () => openModal(editDrawerSlug),
+        onReplace: handleFileRemoval
+      }), /*#__PURE__*/_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", {
+          className: `${baseClass}__upload`,
+          children: [!value && /*#__PURE__*/_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')]
+              })]
+            })
+          }), value && fileSrc && /*#__PURE__*/_jsxs(Fragment, {
+            children: [/*#__PURE__*/_jsx(Button, {
+              buttonStyle: "secondary",
+              className: `${baseClass}__remove`,
+              icon: "x",
+              onClick: handleFileRemoval,
+              round: true,
+              tooltip: t('general:cancel')
+            }), renderSelectedFilePreview(fileSrc), /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__file-adjustments`,
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                id: "field-filemanager-filename",
+                label: t('upload:fileName'),
+                onChange: handleFileNameChange,
+                path: "filename",
+                value: filename || value.name
+              }), (value.size || value.type) && /*#__PURE__*/_jsx("span", {
+                className: `${baseClass}__selected-meta`,
+                children: [value.size ? formatFilesize(value.size) : null, value.type].filter(Boolean).join(' – ')
+              })]
+            })]
+          })]
+        }) : null
+      })]
+    }), drawers]
+  });
+};
+//# sourceMappingURL=index.js.map