@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.a7ca468

package/dist/elements/Upload/UploadFromURLModal/index.js

@@ -0,0 +1,88 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TextInput } from '../../../fields/Text/Input.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js';
+export const pasteURLDrawerSlug = 'upload-paste-url';
+export const UploadFromURLModal = t0 => {
+  const $ = _c(12);
+  const {
+    fileUrl,
+    handleUrlSubmit,
+    isValidUrl,
+    setFileUrl
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== fileUrl || $[1] !== handleUrlSubmit || $[2] !== isValidUrl || $[3] !== setFileUrl || $[4] !== t) {
+    let t2;
+    if ($[6] !== handleUrlSubmit) {
+      t2 = e => {
+        e.preventDefault();
+        handleUrlSubmit();
+      };
+      $[6] = handleUrlSubmit;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    let t3;
+    if ($[8] !== setFileUrl) {
+      t3 = e_0 => setFileUrl(e_0.target.value);
+      $[8] = setFileUrl;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== handleUrlSubmit) {
+      t4 = () => void handleUrlSubmit();
+      $[10] = handleUrlSubmit;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    t1 = _jsxs(DialogModal, {
+      closeOnBlur: true,
+      slug: pasteURLDrawerSlug,
+      children: [_jsx(DialogHeader, {
+        showClose: true,
+        title: t("upload:fromURL")
+      }), _jsx(DialogBody, {
+        children: _jsx("form", {
+          onSubmit: t2,
+          children: _jsx(TextInput, {
+            label: t("upload:linkToFile"),
+            onChange: t3,
+            path: "url",
+            placeholder: "https://",
+            value: fileUrl
+          })
+        })
+      }), _jsx(DialogFooter, {
+        children: _jsx(Button, {
+          buttonStyle: "primary",
+          disabled: !isValidUrl,
+          onClick: t4,
+          children: t("upload:addFile")
+        })
+      })]
+    });
+    $[0] = fileUrl;
+    $[1] = handleUrlSubmit;
+    $[2] = isValidUrl;
+    $[3] = setFileUrl;
+    $[4] = t;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Upload/UploadFromURLModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","TextInput","useTranslation","Button","DialogBody","DialogFooter","DialogHeader","DialogModal","pasteURLDrawerSlug","UploadFromURLModal","t0","$","fileUrl","handleUrlSubmit","isValidUrl","setFileUrl","t","t1","t2","e","preventDefault","t3","e_0","target","value","t4","_jsxs","closeOnBlur","slug","children","_jsx","showClose","title","onSubmit","label","onChange","path","placeholder","buttonStyle","disabled","onClick"],"sources":["../../../../src/elements/Upload/UploadFromURLModal/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { TextInput } from '../../../fields/Text/Input.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js'\n\nexport const pasteURLDrawerSlug = 'upload-paste-url'\n\ntype Props = {\n  readonly fileUrl: string\n  readonly handleUrlSubmit: () => Promise<void>\n  readonly isValidUrl: boolean\n  readonly setFileUrl: (url: string) => void\n}\n\nexport const UploadFromURLModal: React.FC<Props> = ({\n  fileUrl,\n  handleUrlSubmit,\n  isValidUrl,\n  setFileUrl,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <DialogModal closeOnBlur slug={pasteURLDrawerSlug}>\n      <DialogHeader showClose title={t('upload:fromURL')} />\n      <DialogBody>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            void handleUrlSubmit()\n          }}\n        >\n          <TextInput\n            label={t('upload:linkToFile')}\n            onChange={(e) => setFileUrl(e.target.value)}\n            path=\"url\"\n            placeholder=\"https://\"\n            value={fileUrl}\n          />\n        </form>\n      </DialogBody>\n      <DialogFooter>\n        <Button buttonStyle=\"primary\" disabled={!isValidUrl} onClick={() => void handleUrlSubmit()}>\n          {t('upload:addFile')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,QAAQ;AAEpE,OAAO,MAAMC,kBAAA,GAAqB;AASlC,OAAO,MAAMC,kBAAA,GAAsCC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,OAAA;IAAAC,eAAA;IAAAC,UAAA;IAAAC;EAAA,IAAAL,EAKnD;EACC;IAAAM;EAAA,IAAcd,cAAA;EAAA,IAAAe,EAAA;EAAA,IAAAN,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,eAAA,IAAAF,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAK,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAP,CAAA,QAAAE,eAAA;MAOIK,EAAA,GAAAC,CAAA;QACRA,CAAA,CAAAC,cAAA,CAAgB;QACXP,eAAA;MAAA;MACPF,CAAA,MAAAE,eAAA;MAAAF,CAAA,MAAAO,EAAA;IAAA;MAAAA,EAAA,GAAAP,CAAA;IAAA;IAAA,IAAAU,EAAA;IAAA,IAAAV,CAAA,QAAAI,UAAA;MAIYM,EAAA,GAAAC,GAAA,IAAOP,UAAA,CAAWI,GAAA,CAAAI,MAAA,CAAAC,KAAc;MAAAb,CAAA,MAAAI,UAAA;MAAAJ,CAAA,MAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAAA,IAAAc,EAAA;IAAA,IAAAd,CAAA,SAAAE,eAAA;MAQgBY,EAAA,GAAAA,CAAA,UAAWZ,eAAA;MAAAF,CAAA,OAAAE,eAAA;MAAAF,CAAA,OAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IAnB7EM,EAAA,GAAAS,KAAA,CAAAnB,WAAA;MAAAoB,WAAA;MAAAC,IAAA,EAAApB,kBAAA;MAAAqB,QAAA,GACEC,IAAA,CAAAxB,YAAA;QAAAyB,SAAA;QAAAC,KAAA,EAA+BhB,CAAA,CAAE;MAAA,C,GACjCc,IAAA,CAAA1B,UAAA;QAAAyB,QAAA,EACEC,IAAA,CAAC;UAAAG,QAAA,EACWf,EAGV;UAAAW,QAAA,EAEAC,IAAA,CAAA7B,SAAA;YAAAiC,KAAA,EACSlB,CAAA,CAAE;YAAAmB,QAAA,EACCd,EAAgC;YAAAe,IAAA,EACrC;YAAAC,WAAA,EACO;YAAAb,KAAA,EACLZ;UAAA,C;;UAIbkB,IAAA,CAAAzB,YAAA;QAAAwB,QAAA,EACEC,IAAA,CAAA3B,MAAA;UAAAmC,WAAA,EAAoB;UAAAC,QAAA,GAAqBzB,UAAA;UAAA0B,OAAA,EAAqBf,EAAW;UAAAI,QAAA,EACtEb,CAAA,CAAE;QAAA,C;;;;;;;;;;;;SApBTC,E;CAyBJ","ignoreList":[]}

package/dist/elements/Upload/index.css

@@ -8,11 +8,7 @@
 
   .file-field__upload {
     display: flex;
-  }
-
-  .file-field .tooltip.error-message {
-    z-index: 3;
-    bottom: calc(100% - var(--spacer-2));
+    position: relative;
   }
 
   .file-field__file-selected {
@@ -33,12 +29,14 @@
   }
 
   .file-field__remove {
-    margin: var(--spacer-4) var(--spacer-3) var(--spacer-3) 0;
-    place-self: flex-start;
+    position: absolute;
+    top: var(--spacer-2);
+    right: var(--spacer-2);
+    margin: 0;
+    z-index: 1;
   }
 
-  .file-field__file-adjustments,
-  .file-field__remote-file-wrap {
+  .file-field__file-adjustments {
     padding: var(--spacer-3);
     width: 100%;
     display: flex;
@@ -46,48 +44,10 @@
     gap: var(--spacer-2);
   }
 
-  .file-field__filename,
-  .file-field__remote-file {
-    font-family: var(--font-body);
-    width: 100%;
-    border: var(--stroke-width-small) solid var(--color-border);
-    border-radius: var(--radius-small);
-    background: var(--color-bg-primary);
-    color: var(--color-text);
-    font-size: 1rem;
-    height: var(--spacer-6);
-    line-height: var(--spacer-3);
-    padding: var(--spacer-1) var(--spacer-2-5);
-    -webkit-appearance: none;
-
-    &[data-rtl='true'] {
-      direction: rtl;
-    }
-
-    &::-webkit-input-placeholder {
-      color: var(--color-text-tertiary);
-      font-weight: normal;
-      font-size: 1rem;
-    }
-
-    &:hover {
-      border-color: var(--color-border-hover);
-    }
-
-    &:focus {
-      border-color: var(--color-border-selected);
-      outline: none;
-    }
-  }
-
-  .file-field__upload-actions,
-  .file-field__add-file-wrap {
+  .file-field__upload-actions {
     display: flex;
     gap: var(--spacer-2);
     flex-wrap: wrap;
-  }
-
-  .file-field__upload-actions {
     margin-top: var(--spacer-2);
   }
 
@@ -104,13 +64,18 @@
   .file-field .dropzone {
     background-color: transparent;
     padding: var(--spacer-2-5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .file-field__dropzoneContent {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
-    gap: var(--spacer-1);
-    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacer-2);
+    justify-content: center;
     width: 100%;
   }
 
@@ -133,6 +98,125 @@
     color: var(--color-text-tertiary);
   }
 
+  .file-field--side-panel {
+    position: relative;
+    flex: 1 0 0;
+    width: 100%;
+    min-height: max(500px, calc(100dvh - var(--doc-controls-height) - var(--app-header-height)));
+    margin-bottom: 0;
+    border-radius: 0;
+    background: var(--color-bg-secondary);
+  }
+
+  .file-field__side-panel__content {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .file-field__side-panel__preview {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    min-width: 0;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-3) var(--spacer-4);
+    gap: var(--spacer-3);
+    overflow: hidden;
+  }
+
+  .file-field__side-panel__info {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  .file-field__side-panel__info-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--spacer-2);
+    height: 16px;
+    border-radius: var(--radius-small);
+    background: var(--color-bg-secondary-hover);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .file-field__side-panel__info-meta {
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .file-field__side-panel__image-wrap {
+    flex: 1 0 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .thumbnail {
+      max-width: 100%;
+      max-height: 100%;
+
+      img,
+      svg {
+        object-fit: scale-down;
+      }
+    }
+  }
+
+  .file-field__side-panel__upload {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-4);
+    height: 100%;
+
+    .dropzone {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .file-field--side-panel {
+      min-height: 400px;
+    }
+
+    .file-field__side-panel {
+      position: static;
+      height: auto;
+      min-height: 400px;
+    }
+
+    .file-field__side-panel__content {
+      flex-direction: column;
+    }
+
+    .file-field__side-panel__preview {
+      height: auto;
+    }
+  }
+
   @media (max-width: 768px) {
     .file-field__upload {
       flex-wrap: wrap;

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

@@ -1,6 +1,8 @@
-import type { FormState, SanitizedCollectionConfig, UploadEdits } from 'payload';
+import type { FormState, SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.css';
+import { pasteURLDrawerSlug } from './UploadFromURLModal/index.js';
+export { pasteURLDrawerSlug };
 export declare const editDrawerSlug = "edit-upload";
 export declare const sizePreviewSlug = "preview-sizes";
 type UploadActionsArgs = {
@@ -19,11 +21,4 @@ export type UploadProps = {
     readonly UploadControls?: React.ReactNode;
 };
 export declare const Upload: React.FC<UploadProps>;
-export type UploadProps_v4 = {
-    readonly resetUploadEdits?: () => void;
-    readonly updateUploadEdits?: (args: UploadEdits) => void;
-    readonly uploadEdits?: UploadEdits;
-} & UploadProps;
-export declare const Upload_v4: React.FC<UploadProps_v4>;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIhF,OAAO,KAA6D,MAAM,OAAO,CAAA;AAiBjF,OAAO,aAAa,CAAA;AAMpB,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,eAAe,kBAAkB,CAAA;AAc9C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,qEAK3B,iBAAiB,sBAkDnB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAC1D,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAYxC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;CACnC,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwa9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIhF,OAAO,KAA6D,MAAM,OAAO,CAAA;AAkBjF,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,kBAAkB,EAAsB,MAAM,+BAA+B,CAAA;AAEtF,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAG7B,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,eAAe,kBAAkB,CAAA;AAc9C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,wEAKvB,iBAAiB,sBAkDnB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAC1D,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAYxC,CAAA"}

package/dist/elements/Upload/index.js

@@ -8,6 +8,7 @@ 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, useFormProcessing } from '../../forms/Form/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { useConfig } from '../../providers/Config/index.js';
@@ -24,6 +25,8 @@ import './index.css';
 import { FileDetails } from '../FileDetails/index.js';
 import { PreviewSizes } from '../PreviewSizes/index.js';
 import { Thumbnail } from '../Thumbnail/index.js';
+import { pasteURLDrawerSlug, UploadFromURLModal } from './UploadFromURLModal/index.js';
+export { pasteURLDrawerSlug };
 const baseClass = 'file-field';
 export const editDrawerSlug = 'edit-upload';
 export const sizePreviewSlug = 'preview-sizes';
@@ -73,7 +76,7 @@ export const UploadActions = t0 => {
             size: "medium",
             children: t("upload:previewSizes")
           }), enableAdjustments && _jsx(Button, {
-            buttonStyle: "pill",
+            buttonStyle: "secondary",
             className: `${baseClass}__edit`,
             margin: false,
             onClick: () => {
@@ -112,7 +115,7 @@ export const Upload = props => {
   let t0;
   if ($[0] !== props || $[1] !== resetUploadEdits || $[2] !== updateUploadEdits || $[3] !== uploadEdits) {
     t0 = _jsx(UploadControlsProvider, {
-      children: _jsx(Upload_v4, {
+      children: _jsx(UploadComponent, {
         ...props,
         resetUploadEdits,
         updateUploadEdits,
@@ -129,7 +132,7 @@ export const Upload = props => {
   }
   return t0;
 };
-export const Upload_v4 = props => {
+const UploadComponent = props => {
   const {
     collectionSlug,
     customActions,
@@ -159,6 +162,10 @@ export const Upload_v4 = props => {
   const {
     t
   } = useTranslation();
+  const {
+    closeModal,
+    openModal
+  } = useModal();
   const {
     setModified
   } = useForm();
@@ -181,9 +188,7 @@ export const Upload_v4 = props => {
   const [fileSrc, setFileSrc] = useState(null);
   const [removedFile, setRemovedFile] = 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 useServerSideFetch = typeof uploadConfig?.pasteURL === 'object' && uploadConfig.pasteURL.allowList?.length > 0;
   const handleFileChange = useCallback(({
@@ -194,7 +199,6 @@ export const Upload_v4 = props => {
       setFileSrc(URL.createObjectURL(file));
     }
     setValue(file);
-    setShowUrlInput(false);
     setUploadControlFileUrl('');
     setUploadControlFileName(null);
     setUploadControlFile(null);
@@ -234,7 +238,6 @@ export const Upload_v4 = props => {
     setFileSrc('');
     setFileUrl('');
     resetUploadEdits();
-    setShowUrlInput(false);
     setUploadControlFileUrl('');
     setUploadControlFileName(null);
     setUploadControlFile(null);
@@ -243,8 +246,9 @@ export const Upload_v4 = props => {
     setModified(true);
     updateUploadEdits(args);
   }, [setModified, updateUploadEdits]);
+  const isValidUrl = Boolean(fileUrl && URL.canParse(fileUrl));
   const handleUrlSubmit = useCallback(async () => {
-    if (!fileUrl || uploadConfig?.pasteURL === false) {
+    if (!fileUrl || !URL.canParse(fileUrl) || uploadConfig?.pasteURL === false) {
       return;
     }
     setUploadStatus('uploading');
@@ -255,7 +259,8 @@ export const Upload_v4 = props => {
         throw new Error(`Fetch failed with status: ${clientResponse.status}`);
       }
       const blob = await clientResponse.blob();
-      const fileName = uploadControlFileName || decodeURIComponent(fileUrl.split('/').pop() || '');
+      const rawSegment = fileUrl.split('/').pop() || '';
+      const fileName = uploadControlFileName || decodeURIComponent(rawSegment.split('?')[0]);
       const file_0 = new File([blob], fileName, {
         type: blob.type
       });
@@ -263,6 +268,8 @@ export const Upload_v4 = props => {
         file: file_0
       });
       setUploadStatus('idle');
+      closeModal(pasteURLDrawerSlug);
+      setFileUrl('');
       return; // Exit if client-side fetch succeeds
     } catch (_clientError) {
       if (!useServerSideFetch) {
@@ -283,7 +290,8 @@ export const Upload_v4 = props => {
         throw new Error(`Fetch failed with status: ${serverResponse.status}`);
       }
       const blob_0 = await serverResponse.blob();
-      const fileName_0 = decodeURIComponent(fileUrl.split('/').pop() || '');
+      const rawSegment_0 = fileUrl.split('/').pop() || '';
+      const fileName_0 = decodeURIComponent(rawSegment_0.split('?')[0]);
       const file_1 = new File([blob_0], fileName_0, {
         type: blob_0.type
       });
@@ -291,11 +299,13 @@ export const Upload_v4 = props => {
         file: file_1
       });
       setUploadStatus('idle');
+      closeModal(pasteURLDrawerSlug);
+      setFileUrl('');
     } catch (_serverError) {
       toast.error('The provided URL is not allowed.');
       setUploadStatus('failed');
     }
-  }, [api, collectionSlug, fileUrl, handleFileChange, id, setUploadStatus, uploadConfig, uploadControlFileName, useServerSideFetch]);
+  }, [api, closeModal, collectionSlug, fileUrl, handleFileChange, id, setUploadStatus, uploadConfig, uploadControlFileName, useServerSideFetch]);
   useEffect(() => {
     if (initialState?.file?.value instanceof File) {
       setFileSrc(URL.createObjectURL(initialState.file.value));
@@ -303,10 +313,12 @@ export const Upload_v4 = props => {
     }
   }, [initialState]);
   useEffect(() => {
-    if (showUrlInput && urlInputRef.current) {
-      // urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true
-    }
-  }, [showUrlInput]);
+    return () => {
+      if (fileSrc?.startsWith('blob:')) {
+        URL.revokeObjectURL(fileSrc);
+      }
+    };
+  }, [fileSrc]);
   useEffect(() => {
     if (isFormSubmitting) {
       setRemovedFile(false);
@@ -343,6 +355,40 @@ export const Upload_v4 = props => {
     };
     void handleControlFile();
   }, [uploadControlFile, handleFileChange]);
+  const drawers = /*#__PURE__*/_jsxs(React.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}__previewDrawer`,
+      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
+    })]
+  });
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass].filter(Boolean).join(' '),
     children: [/*#__PURE__*/_jsx(FieldError, {
@@ -360,7 +406,7 @@ export const Upload_v4 = props => {
       uploadConfig: uploadConfig
     }), (!uploadConfig.hideFileInputOnCreate && !data?.filename || removedFile) && /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__upload`,
-      children: [!value && !showUrlInput && /*#__PURE__*/_jsx(Dropzone, {
+      children: [!value && /*#__PURE__*/_jsx(Dropzone, {
         onChange: handleFileSelection,
         children: /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__dropzoneContent`,
@@ -394,7 +440,7 @@ export const Upload_v4 = props => {
               }), /*#__PURE__*/_jsx(Button, {
                 buttonStyle: "pill",
                 onClick: () => {
-                  setShowUrlInput(true);
+                  openModal(pasteURLDrawerSlug);
                   setUploadControlFileUrl('');
                   setUploadControlFile(null);
                   setUploadControlFileName(null);
@@ -408,44 +454,15 @@ export const Upload_v4 = props => {
             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_1 => {
-              setFileUrl(e_1.target.value);
-            },
-            ref: urlInputRef,
-            title: fileUrl,
-            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, {
+      }), value && fileSrc && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
           buttonStyle: "ghost",
           className: `${baseClass}__remove`,
           icon: "x",
-          onClick: () => {
-            setShowUrlInput(false);
-            setUploadControlFileUrl('');
-            setUploadControlFile(null);
-            setUploadControlFileName(null);
-          },
+          onClick: handleFileRemoval,
           round: true,
           tooltip: t('general:cancel')
-        })]
-      }), value && fileSrc && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/_jsx("div", {
           className: `${baseClass}__thumbnail-wrap`,
           children: /*#__PURE__*/_jsx(Thumbnail, {
             collectionSlug: collectionSlug,
@@ -453,11 +470,10 @@ export const Upload_v4 = props => {
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__file-adjustments`,
-          children: [/*#__PURE__*/_jsx("input", {
-            className: `${baseClass}__filename`,
+          children: [/*#__PURE__*/_jsx(TextInput, {
+            label: t('upload:fileName'),
             onChange: handleFileNameChange,
-            title: filename || value.name,
-            type: "text",
+            path: "filename",
             value: filename || value.name
           }), /*#__PURE__*/_jsx(UploadActions, {
             customActions: customActions,
@@ -465,46 +481,9 @@ export const Upload_v4 = props => {
             enablePreviewSizes: hasImageSizes && data?.filename && !removedFile,
             mimeType: value.type
           })]
-        }), /*#__PURE__*/_jsx(Button, {
-          buttonStyle: "ghost",
-          className: `${baseClass}__remove`,
-          icon: "x",
-          onClick: handleFileRemoval,
-          round: true,
-          tooltip: t('general:cancel')
         })]
       })]
-    }), (value || data?.filename) && /*#__PURE__*/_jsx(EditDepthProvider, {
-      children: /*#__PURE__*/_jsx(Drawer, {
-        Header: null,
-        slug: editDrawerSlug,
-        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}__previewDrawer`,
-      hoverTitle: true,
-      slug: sizePreviewSlug,
-      title: t('upload:sizesFor', {
-        label: data.filename
-      }),
-      children: /*#__PURE__*/_jsx(PreviewSizes, {
-        doc: data,
-        imageCacheTag: imageCacheTag,
-        uploadConfig: uploadConfig
-      })
-    })]
+    }), drawers]
   });
 };
 function _temp(CustomAction, i) {