Image upload on S3 not working with Next Image

[abel-sch]

Hi there,

Not sure if I'm doing anything wrong but I'm trying to get a deployed app on Vercel working with a S3 Bucket (currently using free tier Supabase).

My config looks like this:

  plugins: [
    s3Storage({
      collections: {
        [Media.slug]: true,
      },
      disableLocalStorage: true,
      bucket: process.env.S3_BUCKET_NAME as string,
      config: {

        forcePathStyle: true,
        credentials: {
          accessKeyId: process.env.S3_ACCESS_KEY_ID as string,
          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY as string,
        },
        region: process.env.S3_REGION,
        endpoint: process.env.S3_ENDPOINT,
      },
    }),
  ],

This works fine locally. But when I use these remote on a Next Image component I get a 400: BAD_REQUEST Code: INVALID_IMAGE_OPTIMIZE_REQUEST error. On closer inspection the url column in the database is empty, and the urls I get from the media collections are 'api/media/file/[FILENAME] which might be the problem.

Why is there no direct url to my S3 storage in the database? I don't think Next is capable of using it's own api routes for Image Optimization, or at least a caching layer is preventing newly added images after a deploy to render.

[jmikrut]

This is because by default, Payload's access control is implemented for all upload read requests. But you can turn that off. Look up disablePayloadAccessControl in the S3 storage README and then use that.

At that point, the URLs will be direct-to-S3. The URLs are indeed generated, though, which is why they are not saved in the DB.

But in either case, you need to whitelist your image URLs in the Next.js config so that you can use them in conjunction with next/image accordingly. That is probably where the INVALID_IMAGE_OPTIMIZE_REQUEST issue comes from. They might need to be absolute URLs, in which case, you could plug in the URL of your deployment as a prefix to the auto-generated URL that Payload outputs.

Does all of this make sense?

We will close this issue as it's an implementation thing at this point - nothing Payload can do, but let me know if you get this resolved / how you did it!

[abel-sch]

@jmikrut Thanks for the quick reply as always, using Access Control to limit the access to uploads is neat! I'm trying to disablePayloadAccessControl way, but this leads to a mismatch in the url:

The URL Payload returns is: https://wisidwbpvyjuwcmeeocv.supabase.co/storage/v1/s3/payload-bucket/af706c6ccbef13e07b794a73b5cbe220.png

Whilst the public URL Supabase gives me is: https://wisidwbpvyjuwcmeeocv.supabase.co/storage/v1/object/public/payload-bucket/af706c6ccbef13e07b794a73b5cbe220.png

I can imagine this is a difference between Supabase or straight up AWS S3. Is there any case to overwrite the out-going base url?

[jmikrut]

Yes, this is because you're using Supabase storage, but with the S3 adapter.

We can look into this (might need to expose a baseURL property in the S3 adapter options).

Alternatively, I think that it might be better to just create an explicit Supabase storage adapter. Either way would probably be fine honestly given that Supabase appears to be S3-compatible.

Would you be up for creating a PR for our S3 adapter, which adds the baseURL which would then be used to generate URLs? This would allow your situation to work, but it wouldn't be super clear to other Supabase storage users.

Would just need to add an option and then pass it through to the getGenerateURL function here:

https://github.com/payloadcms/payload/blob/beta/packages/storage-s3/src/generateURL.ts#L11

Alternatively at some point we'll need a Supabase-specific adapter but that would require a bit more work I think.

What do you think?

[abel-sch]

I'm not an expert on S3 buckets but there are more providers of S3 storage, perhaps they also use a different baseURL (Digital Ocean maybe?).

I would def be up to creating a PR but not really sure how to create a dev setup for the Payload packages. Do you have any docs I could check? @jmikrut