Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

How To Upload Multiple Images Within Collection?

default discord avatar
.kilosierralast year
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
    notchrlast year

    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
    .kilosierralast year

    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
    notchrlast year

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

  • discord user avatar
    tylandavis
    last year

    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
    notchrlast year

    Maybe I misunderstood the issue



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

  • default discord avatar
    .kilosierralast year

    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 dedicated engineering support directly from the Payload team..