fix: upload editing error with plugin-cloud (#4170)

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

packages/payload/src/admin/components/elements/PreviewSizes/index.tsx

@@ -78,16 +78,17 @@ const PreviewSizes: React.FC<{
   const [orderedSizes, setOrderedSizes] = useState<FileSizes>(() => sortSizes(sizes, imageSizes))
   const [selectedSize, setSelectedSize] = useState<null | string>(null)
 
-  const generateImageUrl = (filename) => {
-    return `${staticURL}/${filename}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+  const generateImageUrl = (doc) => {
+    if (!doc.filename) return null
+    if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`
   }
   useEffect(() => {
     setOrderedSizes(sortSizes(sizes, imageSizes))
   }, [sizes, imageSizes, imageCacheTag])
 
   const mainPreviewSrc = selectedSize
-    ? generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)
-    : generateImageUrl(doc.filename)
+    ? generateImageUrl(doc.sizes[selectedSize])
+    : generateImageUrl(doc)
 
   const originalImage = useMemo(
     (): FileSizes[0] => ({
@@ -121,12 +122,12 @@ const PreviewSizes: React.FC<{
             meta={originalImage}
             name={originalFilename}
             onClick={() => setSelectedSize(null)}
-            previewSrc={generateImageUrl(doc.filename)}
+            previewSrc={generateImageUrl(doc)}
           />
 
           {Object.entries(orderedSizes).map(([key, val]) => {
             const selected = selectedSize === key
-            const previewSrc = val.filename ? generateImageUrl(val.filename) : undefined
+            const previewSrc = generateImageUrl(val)
 
             if (previewSrc) {
               return (

packages/payload/src/uploads/generateFileData.ts

@@ -17,6 +17,7 @@ import { FileUploadError, MissingFile } from '../errors'
 import canResizeImage from './canResizeImage'
 import cropImage from './cropImage'
 import getFileByPath from './getFileByPath'
+import getFileByURL from './getFileByURL'
 import getImageSize from './getImageSize'
 import getSafeFileName from './getSafeFilename'
 import resizeAndTransformImageSizes from './imageResizer'
@@ -63,12 +64,22 @@ export const generateFileData = async <T>({
   }
 
   if (!file && uploadEdits && data) {
-    const { filename } = data as FileData
-    const filePath = `${staticPath}/${filename}`
-    const response = await getFileByPath(filePath)
+    const { filename, url } = data as FileData
 
-    overwriteExistingFiles = true
-    file = response as UploadedFile
+    try {
+      if (url && url.startsWith('/')) {
+        const filePath = `${staticPath}/${filename}`
+        const response = await getFileByPath(filePath)
+        file = response as UploadedFile
+        overwriteExistingFiles = true
+      } else {
+        const response = await getFileByURL(url)
+        file = response as UploadedFile
+        overwriteExistingFiles = true
+      }
+    } catch (err) {
+      throw new FileUploadError(req.t)
+    }
   }
 
   if (!file) {
@@ -190,7 +201,12 @@ export const generateFileData = async <T>({
       fileData.width = info.width
       fileData.height = info.height
       fileData.filesize = info.size
-      req.files.file = fileForResize
+
+      if (file.tempFilePath) {
+        await fs.promises.writeFile(file.tempFilePath, croppedImage) // write fileBuffer to the temp path
+      } else {
+        req.files.file = fileForResize
+      }
     } else {
       filesToSave.push({
         buffer: fileBuffer?.data || file.data,

packages/payload/src/uploads/getBaseFields.ts

@@ -142,7 +142,7 @@ const getBaseUploadFields = ({ collection, config }: Options): Field[] => {
                       return `${uploadOptions.staticURL}/${sizeFilename}`
                     }
 
-                    return undefined
+                    return null
                   },
                 ],
               },

packages/payload/src/uploads/getFileByURL.ts

@@ -0,0 +1,26 @@
+import fetch from 'node-fetch'
+import path from 'path'
+
+import type { File } from './types'
+
+const getFileByURL = async (url: string): Promise<File> => {
+  if (typeof url === 'string') {
+    const res = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'GET',
+    })
+    const data = await res.buffer()
+    const name = path.basename(url)
+
+    return {
+      name,
+      data,
+      mimetype: res.headers.get('content-type') || undefined,
+      size: Number(res.headers.get('content-length')) || 0,
+    }
+  }
+}
+
+export default getFileByURL

packages/payload/src/uploads/types.ts

@@ -22,6 +22,7 @@ export type FileData = {
   mimeType: string
   sizes: FileSizes
   tempFilePath?: string
+  url?: string
   width: number
 }