Cannot upload image in display mode "cards" in a relation when creating the related record

[micreas]

trafficstars

1. Create the following 2 schemas:

  ProductImage: list({
    fields: {
      image: image({
        storage: "local_images",
      }),
      product: relationship({
        ref: "Product.images",
        many: false,
      }),
    },
  }),
  Product: list({
    fields: {
      images: relationship({
        ref: "ProductImage.product",
        ui: {
          displayMode: "cards",
          cardFields: ["image"],
          inlineEdit: { fields: ["image"] },
          inlineCreate: { fields: ["image"] },
        },
        many: true,
      }),
    },
  }),

2. Set up the storage for the images:

  storage: {
      local_images: {
        kind: "local",
        type: "image",
        generateUrl: (path) => `http://localhost:3000/images${path}`,
        serverRoute: {
          path: "/images",
        },
        storagePath: "public/images",
      },
    },

3. Start the keystone app using yarn dev
4. Go to admin UI and open the Product creation form
5. Try to create the ProductImage inline.

It will just refresh the page and do nothing. However, it works in the edit mode once the Product record is created.

Node version: 16.16.0 Web browser: Chrome

[micreas]

Update: Just found out that it happens for any inline entities in the Create view. Not just images.

[au-top]

+1

https://github.com/keystonejs/keystone/issues/7808

[s-en-o]

Hey @micreas do you get any error from the config setup related to the storage key? I tried to setup a config similar to yours but my typescript screaming for error that it won't recognize the key that I put in there (local_images).

[micreas]

Hey @s-en-o no, I don't. I just copied it from the documentation and it works. The only thing that I slightly tweaked was the generateUrl function. I hard-coded the localhost URL for this example.

[s-en-o]

@micreas Found out that I need to provide all the properties for storage, mine was missing serverRoute.

[borisno2]

Resolved in #8177