generateFileUrl must return a string (S3 Storage Plugin)

[mikecebul]

Describe the Bug

It would be nice is generateFileUrl could return a string or null. If I have an image size option larger than the original photo then all the properties in that object are null. But the generateFileUrl will still generate a url like url: 'https://bucket.website.com/media/null'.

I would prefer to check if the filename is null, and if so, return null early.

generateFileURL: (args: any) => {
    if (typeof args.filename !== 'string') return null
    return `https://${process.env.NEXT_PUBLIC_S3_HOSTNAME}/${args.prefix}/${args.filename}`
 },

Then I can't make simple mistakes type checking if the image.sizes.portrait.url exists. Right now I have to make sure I'm always checking if the filename exists, which is weird. Like this.

const imagePortraitUrlIfExists = (image: Media) => {
    if (
      typeof image.sizes?.portrait?.url === 'string' &&
      typeof image.sizes.portrait.filename === 'string'
    )
      return image.sizes.portrait.url
    if (typeof image.url === 'string') return image.url
    return '/placeholder.svg'
  }

Note:

This hack works but I don't understand enough about Typescript to know why.

generateFileURL: (args: any) => {
    if (typeof args.filename !== 'string') return null as unknown as string
    return `https://${process.env.NEXT_PUBLIC_S3_HOSTNAME}/${args.prefix}/${args.filename}`
  },

Link to the code that reproduces this issue

N/A

Reproduction Steps

Create an image size in your Media larger than the image you're going to test with:

{
  name: 'portrait',
  width: 800,
  height: 1000,
  formatOptions: {
    format: 'webp',
  },
  generateImageName: ({ originalName }) => {
    return `${originalName}-portrait`
  },
}

use the S3 plugin:

s3StoragePlugin({
  ...S3_PLUGIN_CONFIG,
  collections: {
    media: {
      disableLocalStorage: true,
      generateFileURL: (args: any) => {
        if (typeof args.filename !== 'string') return null as unknown as string
        return `https://${process.env.NEXT_PUBLIC_S3_HOSTNAME}/${args.prefix}/${args.filename}`
      },
      prefix: 'media',
    },
  },
}),

log the image object:

{
#13 107.1   id: '672a73f47822641e79b94722',
#13 107.1   alt: 'Leah Mayotte profile',
#13 107.1   prefix: 'media',
#13 107.1   filename: 'LeahMayotte_Profile.webp',
#13 107.1   mimeType: 'image/webp',
#13 107.1   filesize: 90748,
#13 107.1   width: 1600,
#13 107.1   height: 1600,
#13 107.1   focalX: 50,
#13 107.1   focalY: 50,
#13 107.1   sizes: {
#13 107.1     thumbnail: {
#13 107.1       width: 300,
#13 107.1       height: 300,
#13 107.1       mimeType: 'image/webp',
#13 107.1       filesize: 10620,
#13 107.1       filename: 'LeahMayotte_Profile-thumbnail',
#13 107.1       url: 'https://bucket.website.com/media/LeahMayotte_Profile-thumbnail'
#13 107.1     },
#13 107.1     portrait: {
#13 107.1       width: null,
#13 107.1       height: null,
#13 107.1       mimeType: null,
#13 107.1       filesize: null,
#13 107.1       filename: null,
#13 107.1       url: 'https://bucket.website.com/media/null' 
#13 107.1     },
#13 107.1     meta: {
#13 107.1       width: 630,
#13 107.1       height: 630,
#13 107.1       mimeType: 'image/webp',
#13 107.1       filesize: 27718,
#13 107.1       filename: 'LeahMayotte_Profile-meta',
#13 107.1       url: 'https://bucket.website.com/media/LeahMayotte_Profile-meta'
#13 107.1     }
#13 107.1   },
#13 107.1   createdAt: '2024-11-05T19:37:24.401Z',
#13 107.1   updatedAt: '2024-11-05T19:37:24.401Z',
#13 107.1   url: 'https://bucket.website.com/media/LeahMayotte_Profile.webp',
#13 107.1   thumbnailURL: '/api/media/file/LeahMayotte_Profile-thumbnail'
#13 107.1 }

Which area(s) are affected? (Select all that apply)

plugin: other

Environment Info

Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: 9.7.0
Relevant Packages:
  payload: 3.0.0-beta.126
  next: 15.0.0
  @payloadcms/db-mongodb: 3.0.0-beta.126
  @payloadcms/email-resend: 3.0.0-beta.126
  @payloadcms/graphql: 3.0.0-beta.126
  @payloadcms/live-preview: 3.0.0-beta.126
  @payloadcms/live-preview-react: 3.0.0-beta.126
  @payloadcms/next/utilities: 3.0.0-beta.126
  @payloadcms/plugin-cloud-storage: 3.0.0-beta.126
  @payloadcms/plugin-form-builder: 3.0.0-beta.126
  @payloadcms/plugin-redirects: 3.0.0-beta.126
  @payloadcms/plugin-seo: 3.0.0-beta.126
  @payloadcms/richtext-lexical: 3.0.0-beta.126
  @payloadcms/storage-s3: 3.0.0-beta.126
  @payloadcms/translations: 3.0.0-beta.126
  @payloadcms/ui/shared: 3.0.0-beta.126
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:00 PDT 2024; root:xnu-10063.141.2~1/RELEASE_X86_64
  Available memory (MB): 8192
  Available CPU cores: 8

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload