How do I create a Keystone.js field that can take multiple images as an input and then store them?

Question

Basically, I want to know how I can create a field in Keystone.js (Ver.6) that can take in multiple images as an input and then store them in a specified storage (S3 or Local).

I checked to see if their are any options for the Image file type, but turns out there's nothing like that.

Answer 1

Did you look at the documentation for how to create an store images? https://keystonejs.com/docs/fields/image

A single storage may be used by multiple file or image fields, but only for files or images.

https://keystonejs.com/docs/config/config#storage-images-and-files

You can even reference keystonejs github examples for clarification https://github.com/keystonejs/keystone/blob/main/examples/assets-s3/keystone.ts

@Vibhavi_T

Answer 2

Actually there is a field in Keystone known as cloudinaryimage

https://keystonejs.com/docs/fields/cloudinaryimage

you can create a media schema to upload one image at a time ,

Image Schema

export const Image = list({
  access: allowAll,
  fields: {
    name: text({
      validation: {
        isRequired: true
      }
    }),
    image: cloudinaryImage({
      cloudinary,
    }),
    altText: text(),
    product: relationship({
      ref: "Product.image",
    }),
  },
});

Using relationship(), you can connect your required structure (Lets say here Im using products)

export const Product = list({
  access: allowAll,
  fields: {
    name: text({ validation: { isRequired: true } }),
    description: text({
      ui: {
        displayMode: "textarea",
      },
    }),
    image: relationship({
      ref: "Image.product",
      many: true,
    }),
  },
});

Using many: true you can attach multiple images