Media collection's url field is not populated when using defaultPopulate

[igor-zmitrovich]

Hello!

I have the following collections:

export const Media: CollectionConfig = {
  slug: "media",
  access: {
    read: () => true,
  },
  defaultPopulate: {
    alt: true,
    url: true,
  },
  fields: [
    {
      name: "alt",
      type: "text",
      required: true,
    },
  ],
  upload: true,
};

export const Ingredients: CollectionConfig = {
  slug: "ingredients",
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "name",
      type: "text",
      required: true,
    },
    {
      name: "slug",
      type: "text",
      unique: true,
      admin: {
        position: "sidebar",
      },
    },
    {
      name: "image",
      type: "upload",
      relationTo: "media",
      required: true,
    },
  ],
};

When I fetch the data via Local API:

const firstPage = await ctx.payload.find({
  collection: "ingredients",
  depth: 1,
});

The image has null as url, while alt is not empty.

console.log(firstPage.docs[0]);
>> {
  id: 22,
  name: 'Rice',
  slug: 'rice',
  image: {
    id: 26,
    alt: 'Rice',
    url: null,
  },
  updatedAt: '2024-12-29T16:17:33.301Z',
  createdAt: '2024-12-29T16:17:18.892Z'
}

Any idea why is that?

[igor-zmitrovich]

Ok, the issue is that the filename was not populated.

When I add the filename: true to defaultPopulate it works.

import type { CollectionConfig } from "payload";

export const Media: CollectionConfig = {
  ...
  defaultPopulate: {
    alt: true,
    url: true,
    filename: true,  // Required for `url`, otherwise it will be `null`
  },
  ...
};

console.log(firstPage.docs[0]);
>> {
  id: 22,
  name: 'Rice',
  slug: 'rice',
  image: {
    id: 26,
    alt: 'Rice',
    url: '/api/media/file/rice.webp',
    filename: 'rice.webp',
  },
  updatedAt: '2024-12-29T16:17:33.301Z',
  createdAt: '2024-12-29T16:17:18.892Z'
}