How To Upload Multiple Images Within Collection?

default discord avatar
.kilosierra
2 months ago
6

I have a case study collection which has an upload field called 'gallery'



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

My problem is this will only allow me to upload a single image. I want to upload multiple images so my api request returns an array of images under gallery. How do I achieve this?

  • default discord avatar
    notchr
    2 months ago

    Hello @.kilosierra! There is an "array" type that will allow you to do this.



    Check out:

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


    import { CollectionConfig } from "payload/types";
    
    export const ExampleCollection: CollectionConfig = {
      slug: "example-collection",
      fields: [
        {
          name: "slider", // required
          type: "array", // required
          label: "Image Slider",
          minRows: 0,
          maxRows: 10,
          labels: {
            singular: "Image",
            plural: "Images",
          },
          fields: [
            {
                name: 'slider-image', // required
                type: 'upload', // required
                relationTo: 'media', // required
                required: true,
            },
          ],
          admin: {
            components: {
              RowLabel: ({ data, index }) => {
                return data?.title || `Image ${String(index).padStart(2, "0")}`;
              },
            },
          },
        },
      ],
    };


    Maybe something like that?



    Then, when you query the "slider" field, you'll get an array of media

  • default discord avatar
    .kilosierra
    2 months ago

    That doesn't work when used with the rest of the fields required for this collection



     import {CollectionConfig} from "payload/types";
    
    const CaseStudies: CollectionConfig = {
        slug: 'case-studies',
        admin: {
            defaultColumns: ['title', 'author', 'category', 'tags', 'status'],
            useAsTitle: 'clientName',
        },
        access: {
            read: () => true,
        },
        fields: [
            {
                name: 'clientName',
                type: 'text'
            },
            {
                name: 'clientWebsite',
                type: 'text'
            },
            {
                name: 'featuredImage', // required
                type: 'upload', // required
                relationTo: 'media', // required
                required: true,
            },
            {
                name: 'clientSummary',
                type: 'text'
            },
            {
                name: 'category',
                type: 'relationship',
                relationTo: 'categories'
            },
            {
                name: 'author',
                type: 'relationship',
                relationTo: 'users',
            },
            {
                name: 'projectDate',
                type: 'date',
            },
    
            {
                name: 'content',
                type: 'richText',
            },
            {
                name: 'status',
                type: 'select',
                options: [
                    {
                        value: 'draft',
                        label: 'Draft',
                    },
                    {
                        value: 'published',
                        label: 'Published',
                    },
                ],
                defaultValue: 'draft',
                admin: {
                    position: 'sidebar',
                }
            }
    
    
        ],
    
    
    
    }
    
    export default CaseStudies 


    If I try throwing in an array of fields within current array of fields then it won't work



    the gallary isn't a standalone collection. I want the gallary data to exist within the case-study collection along with the rest of the data for my case studies

  • default discord avatar
    notchr
    2 months ago

    Hmm, are you saying a nested array is not working?

  • discord user avatar
    tylandavis
    Payload Team
    2 months ago

    Hey @.kilosierra the Array field @notchr is referring to a field itself that you can nest other fields within. Check out this example below:



    fields: [
      // all of your other fields
      // add the array field below
      {
        name: 'gallery',
        type: 'array',
        fields: [
          {
            name: 'image',
            type: 'upload',
            relationTo: 'media',
            required: 'true',
          },
        ],
      },
    ],


    if you add this

    gallery

    field into your collection, it should give the option to add multiple images.

  • default discord avatar
    notchr
    2 months ago

    Maybe I misunderstood the issue



    Ah thank you for clarifying @tylandavis, that's what I meant 😄

  • default discord avatar
    .kilosierra
    2 months ago

    Ah, that makes sense now. Thanks for the help 👍

Open the post
Continue the discussion in Discord
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.