Like what we’re doing? Star us on GitHub!

Add new category/tag from the admin sidebar

jakehopking
6 months ago
1 1

Hi - I've created a Category collection, see the code below.

Is it possible to create new categories from outside of the Categories collection?

I'd like to be able to assign and create new categories from within the Media collection (I'm planning on adding a tags collection next, and this use case will be even more important).

Currently I can obviously assign a category to an image, but as you can see from the screenshot, I can't create new ones:
Screenshot 2022-09-08 at 16 18 26
☝️ What am I missing here?

Category collection:

import { CollectionConfig } from 'payload/types';
import slug from '../fields/slug';

export type CategoryType = {
  title: string;
  slug: string;
};

const Category: CollectionConfig = {
  slug: 'categories',
  admin: {
    useAsTitle: 'title',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'title',
      label: 'Title',
      type: 'text',
      required: true,
    },
    slug(),
  ],
};

export { Category };

Categories field:

import { Field } from 'payload/types';

export const categories: Field = {
  name: 'categories',
  label: 'Categories',
  type: 'relationship',
  relationTo: 'categories',
  hasMany: true,
  admin: {
    position: 'sidebar',
  },
};

Then adding to my Media photos collection:

import { CollectionConfig } from 'payload/types';
import { categories } from '../fields/categories';
import { ImageSizeNames, ImageSizes, MediaSlugs } from '../tokens';

const MediaPhotos: CollectionConfig = {
  slug: MediaSlugs.mediaPhotos,
  access: {
    read: (): boolean => true, // Everyone can read Media
  },
  admin: {
    useAsTitle: 'filename',
  },
  upload: {
    adminThumbnail: ImageSizeNames.thumbnail,
    imageSizes: [...ImageSizes.PhotoImageSizes],
    staticURL: '/media/photos',
    staticDir: 'media/photos',
  },
  fields: [
    {
      name: 'alt',
      label: 'Alt Text',
      type: 'text',
      required: true,
    },
    categories, // <--- Here
  ],
};

export { MediaPhotos };

Thank you ❤️

  • jmikrut
    Payload Team
    6 months ago

    We are building a way to do this as our next big feature! Great question!

    4 replies
  • jakehopking
    6 months ago

    Thanks for the speedy reply. Glad I asked... else could've ended up going down a bit of a rabbit hole I imagine.

    Do you have a rough ETA on that feature hitting production?

  • jmikrut
    Payload Team
    6 months ago

    Within 30 days 😎

  • jmikrut
    Payload Team
    5 months ago

    Hey @jakehopking this is now built!

    #1230

    Not merged yet. Gotta write some tests but just a quick heads-up!

  • jakehopking
    5 months ago

    Great! Thanks for letting me know @jmikrut

Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More