How to upload multiple images within a collection at t he same time?

joelcoreylast year

6

import path from 'path';
import type { CollectionConfig } from 'payload/types';

const Media: CollectionConfig = {
  slug: 'media-collection',
  admin: {
    useAsTitle: 'alt',
    defaultColumns: [
      'id',
      'alt'
    ],
    group: 'Media Collection'
  },
  fields: [
    {
      name: 'name',
      type: 'text',
    },
    {
      name: 'images',
      type: 'array',
      fields: [
        {
          name: "image",
          type: "upload",
          relationTo: "media",
          required: true,
        },
        {
          name: "title",
          type: "text",
        },
        {
          name: "alt",
          type: "text",
        },
        {
          name: "caption",
          type: "text",
        },
      ]
    }
  ],
};

export default Media;

• 

  tinoutilast year

  If I understand correctly what you're trying to do, this is currently not possible natively, but this is a feature that's in development (cf:

  https://discord.com/channels/967097582721572934/1102950643259424828/1128364947336863855

  )

  
  

  If you can't wait though, you'd probably have to go the custom component route and handle that yourself. 😕

• 

  joelcoreylast year

  Is there a good spot to look at a road map? Sorry: super noob when it comes to that channel and Payload in general. And no problem on waiting or having to put in some actual leg work myself. I will have to think about that. I think waiting for native support for multi-image support would be the better use of time for myself.

• 

  tinoutilast year

  Haha no worries, the core discussions happen in the GitHub repo's discussions (

  https://github.com/payloadcms/payload/discussions/categories/roadmap

  ), and if you're looking for more WIP updates, the

  #1102950643259424828

  would be the place to lurk. 😊

  
  
  

  Upvoting the features you care about is a great way to get them prioritized! 😄

  
  

  Here's the one about multi uploads:

  https://github.com/payloadcms/payload/discussions/1149
• 

  joelcoreylast year

  Awesome! Thank you so much!

  
  
  

  Yeah that conversation is a winner. I have to digest and think about that for a few days at least.

• 

  alsherifkhalaf10 months ago

  Hello , any good solution to this ?

• 

  carlosbensant10 months ago

  After reading the discussion #1149, it looks like they started working on this feature.

  
  
  

  A few months ago, I implemented this the same way you did by creating an images field (an array of images).

  
  
  

  For reference, see:

  
  

      
      {
        name: 'featured_image',
        type: 'upload',
        relationTo: 'media',
        label: 'Image',
        admin: {
          components: {
            Cell: Thumbnail,
          },
        },
      },
      {
        label: 'Gallery',
        name: 'images',
        type: 'array',
        fields: [
          {
            name: 'image',
            type: 'upload',
            relationTo: 'media',
            label: 'Image',
          },
        ],
      },