payload: Can't use focal points or cropping in 2.4.0 with plugin-cloud-storage

Link to reproduction

No response

Describe the Bug

After cropping or setting the focal point and pressing save, I get this error:

FileUploadError: There was a problem while uploading the file.
    at generateFileData (cms/node_modules/payload/src/uploads/generateFileData.ts:81:13)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at updateByID (cms/node_modules/payload/src/collections/operations/updateByID.ts:142:57)
    at updateByIDHandler (cms/node_modules/payload/src/collections/requestHandlers/updateByID.ts:36:17)

Also, when setting focal point on a new upload, the image will save, but the focal point won’t be saved. Then trying to edit it, get the same error as the one above.

Here’s a video walkthrough: https://share.cleanshot.com/pbC2DvJN

To Reproduce

Here’s my cloud storage config:

payloadCloudStorage({
  collections: {
    'media': {
      adapter: s3Adapter({
        config: {
          credentials: {
            accessKeyId: process.env.CLOUDFLARE_ACCESS_KEY_ID,
            secretAccessKey: process.env.CLOUDFLARE_SECRET_ACCESS_KEY,
          },
          region: 'auto',
          endpoint: process.env.CLOUDFLARE_ENDPOINT,
        },
        bucket: process.env.CLOUDFLARE_BUCKET,
      }),
    },
  }
}),

And here’s my media collection config:

export const Media: CollectionConfig = {
  slug: 'media',
  access: {
    read: () => true,
  },
  upload: {
    disableLocalStorage: true,
    adminThumbnail: 'thumbnail',
    imageSizes: [
      {
        name: 'webp',
        formatOptions: {
          format: 'webp',
          options: {
            quality: 100
          }
        },
        withoutEnlargement: true,
      },
      {
        name: 'webp_1280',
        width: 1280,
        formatOptions: {
          format: 'webp',
        },
        withoutEnlargement: true,
      },
      // This is used for thumbnails in the CMS
      {
        height: 256,
        width: 256,
        position: 'center',
        name: 'thumbnail',
      },
    ],
  },

Payload Version

2.4.0

Adapters and Plugins

payloadCloudstorage

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 1
Comments: 37 (14 by maintainers)

Commits related to this issue

Update getExternalFile.ts to check if the url is already a full url before appending the base url Fix https://github.com/payloadcms/payload/issues/4422 — committed to mlabrum/payload by mlabrum 5 months ago

Most upvoted comments

@ssyberg yes absolutely. I’ll take look into it, along with this similar issue.

JessChowdhury on Jan 17, 2024

@JessChowdhury can we reopen this? I’m still having this issue on 2.8.2 even with cloudStorage disabled locally (also broken in production with cloudStorage enabled`

ssyberg on Jan 17, 2024

@drosteluk Thanks for the cache hints. There is no CDN in my scenario, I have hooked payload directly to azure storage. But it was browser cache. The afterRead hook did the trick.

Since I’m using multiple sizes, I needed a bit different hook. I created it like this:

        afterRead: [
            async ({doc}) => {
                doc.url = `${doc.url}?updated=${encodeURIComponent(doc.updatedAt)}`;
                for (const size in doc.sizes) {
                    if (doc.sizes[size].url) {
                        doc.sizes[size].url = `${doc.sizes[size].url}?updated=${encodeURIComponent(doc.updatedAt)}`;
                    }
                }
                return doc;
            },
        ],

Thanks for fixing this @drosteluk and @denolfe 🎉

andershermansen on Apr 26, 2024

@ssyberg I have the exact same issue with payload and not being able to readjust focal points after uploading media on payload 2.8.2.

thijssmudde on Jan 30, 2024

@JessChowdhury Thanks for looking into this! I’m a little confused about the first issue, why would I be having the upload issue only after setting the focal point, and not when uploading images normally? The plugin-cloud-storage works fine as-is, without exposing the bucket publicly or adding generateFileURL, it’s only after setting the focal point that the error appears.

It is different the second time (when you change the focal point) because then uploadEdits will be true when it hits this code.

I think the issue might be something simple within this block, I will investigate further and get back to you.

Do you have a serverURL defined in your payload config? I am noticing that this also affects the file urls.

UPDATE:

Even when the URL is correct, the request gets denied access. We need to fix the authentication during the request then this should be working as expected - I’ll work on this first thing tomorrow and get back to you.

JessChowdhury on Dec 13, 2023

@JessChowdhury Adding generateFileURL breaks my frontend which is expecting relative paths like /media/filename.jpg and then prefixes the CMS domain in front of that, e.g. cms.site.com, When I add generateFileURL, the URLs returned by all media items are the absolute URLs from Cloudflare. I could adjust my frontend, but I’m confused now how it’s been working fine with the relative paths and letting Payload spit back the media I need (keeping the Cloudflare bucket private).

jamesvclements on Dec 13, 2023

@denolfe there is no logging of the root cause here. But are there any temp files on the local filesystem here when generering the new image files for new focal point?

if that is the case then maybe that is why its failing for me because the Azure Web App is running from package in read only mode.

andershermansen on Apr 6, 2024

@denolfe I’m still getting this issue when setting a focal point. I’m using a Azure Storage and not S3.

Versions:

Payload 2.12.1
@payloadcms/plugin-cloud-storage 1.1.2
@azure/storage-blob 12.17.0

It works fine in local dev environment (npm run dev) also running against Azure Storage Environment.

But after deploying (to Azure Web App) in production mode I get error.

In browser: 400 Bad request Response: {"errors":[{"message":"There was a problem while uploading the file."}]}

In server side:

2024-04-06T08:20:43.522305582Z: [INFO]  [08:20:42] ERROR (payload): FileUploadError: There was a problem while uploading the file.
2024-04-06T08:20:43.522358383Z: [INFO]      at generateFileData (/home/site/wwwroot/node_modules/payload/dist/uploads/generateFileData.js:61:19)
2024-04-06T08:20:43.522365783Z: [INFO]      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2024-04-06T08:20:43.522370183Z: [INFO]      at async updateByID (/home/site/wwwroot/node_modules/payload/dist/collections/operations/updateByID.js:107:61)
2024-04-06T08:20:43.522374683Z: [INFO]      at async updateByIDHandler (/home/site/wwwroot/node_modules/payload/dist/collections/requestHandlers/updateByID.js:35:21)

andershermansen on Apr 6, 2024