Is there a way of using Keystone and Cloudinary to support multiple image upload?

[Greg1992]

Hello,

I've searched around the issues/discussion panel for a way of adding multiple images to a list like;

Image: list({
    fields: {
      title: text({
        validation: { isRequired: true },
        isIndexed: 'unique',
        isFilterable: true,
        isOrderable: true,
      }),      
      images: cloudinaryImage({
        cloudinary: {
          cloudName: process.env.CLOUDINARY_CLOUD_NAME,
          apiKey: process.env.CLOUDINARY_API_KEY,
          apiSecret: process.env.CLOUDINARY_API_SECRET,
          folder: process.env.CLOUDINARY_API_FOLDER,
        },
        displayOrder: integer(),
        
      }),
    },
    ui: {
      searchFields: ['title'],
      listView: {
        initialSort: { field: 'title', direction: 'ASC' }
      }
    },
    access: allowAll
  }),

in order to upload them all at once to cloudinary.

[marekryb]

Hi,

cloudinaryImage stores information about only one single image. It does not support gallery or anything like this.
You probably want to create multiple Image objects through relation from parent list.

[Greg1992]

Would any other image type Keystone supports, support adding a gallery type of field?

Regarding your second point. By Multiple Image objects i'm not sure what you mean, could you care to expand on it?

[marekryb]

There is no out of the box gallery type field that I am aware of. You could probably make something like this but the problem is how to store array-like data inside SQL database. Well... you make another table. Which leads to my second point.

What you want is probably schema like:

Image: list({
  fields: {
    title: text()
    image: cloudinaryImage()
  }
})
Product: list({
  fields: {
    name: text()
    images: relationship({ ref: "Image", many: true })
  }
})

and then you can create/update product with something like

mutation CreateProduct($data: ProjectCreateInput!) {
  createProduct(data: $data) {
    id
  }
}

data = {
  name: "Product",
  images: { 
    create: [
       {
         title: "test1",
         image: { upload: <File object> },
       },
       {
         title: "test2",
         image: { upload: <File object> },
       }
    ]
  }
}