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

default discord avatar
joelcoreylast year
6

Nothing is wrong per say. I want to bulk upload images. Is there an easy or at least not super difficult way to set this up?


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;

My collection



A little clarity maybe: I want to select a bunch of images from my local drive (say 3 to 10) and drag and drop them. Then have the collection handle adding them. I am not sure if this is easily done.



I think the two major options to look at would be hooks and handlers.

  • default discord avatar
    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. 😕

  • default discord avatar
    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.

  • default discord avatar
    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 #core-dev 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
  • default discord avatar
    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.

  • default discord avatar
    alsherifkhalaf3 months ago

    Hello , any good solution to this ?

  • default discord avatar
    carlosbensant3 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',
            },
          ],
        },
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.