Why is it not possible to use a custom title for an upload collection?

[ornate sonnet]

``
const Icons = {
slug: "icons",
labels: {
singular: "Icon",
plural: "Icons",
},
upload: {
adminThumbnail: "filePath",
mimeTypes: ["image/png", "image/svg+xml"],
crop: false,
},
fields: [
{
name: "iconName",
label: "Icon name",
type: "text",
required: true,
useAsTitle: true, // Set iconName as the title field
},
{
name: "altAttribute",
label: "Alt attribute",
type: "text",
required: true,
localized: true,
},
],
};

module.exports = Icons;
``

[hardy dust]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• nested-properties
• token-based-auth
• server
• relationships-and-or-uploads-disappear-after-editing-a-document

Community-Help:

• TypeError: Cannot read properties of undefined (reading 'fields')
• [The following path cannot be queried: status","data":[{"path":"status"}]}]](https://payloadcms.com/community-help/discord/the-following-path-cannot-be-queried-status-data-path-status)

[ornate sonnet]

Throws an error...

[14:08:40] ERROR (payload): There were 1 errors validating your Payload config [14:08:40] ERROR (payload): 1: Collection "icons" > Field "iconName" > "value" does not match any of the allowed types

[halcyon ivy]

Hmm, it should be lemme check it out

Lets compare to the official example

https://payloadcms.com/docs/fields/upload

    {
      name: 'backgroundImage', // required
      type: 'upload', // required
      relationTo: 'media', // required
      required: true,
    },

on the collection with the upload field

lets check out the default upload collection

import { CollectionConfig } from 'payload/types'

export const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    staticURL: '/media',
    staticDir: 'media',
    imageSizes: [
      {
        name: 'thumbnail',
        width: 400,
        height: 300,
        position: 'centre',
      },
      {
        name: 'card',
        width: 768,
        height: 1024,
        position: 'centre',
      },
      {
        name: 'tablet',
        width: 1024,
        // By specifying `undefined` or leaving a height undefined,
        // the image will be sized to a certain width,
        // but it will retain its original aspect ratio
        // and calculate a height automatically.
        height: undefined,
        position: 'centre',
      },
    ],
    adminThumbnail: 'thumbnail',
    mimeTypes: ['image/*'],
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
    },
  ],
}

[ornate sonnet]

I mean, I guess one way would be to have the Media be the central collection, and then have an Icon collection with relation to Media, but I kind of one to do it all in just one collection

Because I don't plan on having Media, I'd like to have Photos, Icons, etc.

[halcyon ivy]

You should be find to have an upload-enabled Icon collection

I would check out the collection config again, it doesn't like that title field

[ornate sonnet]

Found a solution, I put it in the wrong place. It should be outside the fields parameter.

So, like this...

const Icons = { slug: "icons", labels: { singular: "Icon", plural: "Icons", }, upload: { adminThumbnail: "filePath", mimeTypes: ["image/png", "image/svg+xml"], crop: false, }, fields: [ { name: "iconName", label: "Icon name", type: "text", required: true, }, { name: "altAttribute", label: "Alt attribute", type: "text", required: true, localized: true, }, ], admin: { useAsTitle: "iconName", }, };

Thanks for the help!

[halcyon ivy]

No prob!!