Add new category/tag from the admin sidebar

default discord avatar
jakehopking
12 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 ā¤ļø

  • discord user avatar
    jmikrut
    Payload Team
    12 months ago

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

    4 replies
  • default discord avatar
    jakehopking
    12 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?

  • discord user avatar
    jmikrut
    Payload Team
    12 months ago

    Within 30 days šŸ˜Ž

  • discord user avatar
    jmikrut
    Payload Team
    11 months ago

    Hey @jakehopking this is now built!

    #1230

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

  • default discord avatar
    jakehopking
    11 months ago

    Great! Thanks for letting me know @jmikrut

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.