Filenames in upload URLs are not encoded

[cbratschi]

Describe the Bug

Payload and its cloud storage adapters create URLs for uploaded media files. Filenames are stored in UTF-8 but they are never encoded in the URLs:

const generateURL = ({ collectionSlug, config, filename }: GenerateURLArgs) => {
  if (filename) {
    return `${config.serverURL || ''}${config.routes.api || ''}/${collectionSlug}/file/${filename}`
  }
  return undefined
}

https://github.com/payloadcms/payload/blob/main/packages/payload/src/uploads/getBaseFields.ts#L15

This code should be changed to:

const generateURL = ({ collectionSlug, config, filename }: GenerateURLArgs) => {
  if (filename) {
    return `${config.serverURL || ''}${config.routes.api || ''}/${collectionSlug}/file/${encodeURIComponent(filename)}`
  }
  return undefined
}

We use encodeURIComponent() in our own GridFS plugin and this works fine. We detected this error while reviewing the Payload 3.x code changes.

Link to the code that reproduces this issue

https://github.com/cbratschi/payload

Reproduction Steps

Upload file with spaces, the spaces are not encoded as %20 in the URL.

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

area: core, plugin: cloud-storage

Environment Info

Binaries:
  Node: 22.9.0
  npm: 10.8.3
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  payload: 3.2.2
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:05:23 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6031
  Available memory (MB): 65536
  Available CPU cores: 16