How To Upload Multiple Images Within Collection?

default discord avatar
.kilosierra9 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
    notchr9 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
    .kilosierra9 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
    notchr9 months ago

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

  • discord user avatar
    tylandavis
    9 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
    notchr9 months ago

    Maybe I misunderstood the issue



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

  • default discord avatar
    .kilosierra9 months ago

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

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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