How To Upload Multiple Images Within Collection?

.kilosierra

2 months ago

6

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

• 

  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

• 

  .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

• 

  notchr

  2 months ago

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

• 

  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.

• 

  notchr

  2 months ago

  Maybe I misunderstood the issue

  
  

  
  

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

• 

  .kilosierra

  2 months ago

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