#Custom Cell View for Upload Field in Payload

8 messages · Page 1 of 1 (latest)

dull valleyBOT
#

👋 Hello, I'm trying to create a custom Cell View that should display a thumbnail from the document's upload field. I want this to show up in the list when browsing the Collection. I tried implementing a custom component but this is all the data that's passed to props:

{name: 'image', fieldType: 'upload', isFieldAffectingData: true, label: 'Image', relationTo: 'media'}

I tried following the guide https://payloadcms.com/docs/admin/components#cell-component but it seems like things have changed with Payload 3.

This is the field config:

{
  name: "image",
  type: "upload",
  relationTo: "media",
  admin: {
    components: {
      Cell: ProductImagePreview,
    },
  },
},

Am I missing something? thankyou

Payload CMS

Payload is a headless CMS and application framework built with TypeScript, Node.js, React and MongoDB

crimson juncoBOT
#

Original message from @sand parrot - Moved from #general message

main umbra
#

@sand parrot Hmm

#

You see no changes?

#

Is the ProductImagePreview component being added

sand parrot
#

Hey, managed to get the data this way:

"use client";

import React from "react";
import type { CellComponentProps } from "payload/types";
import { useTableCell } from "@payloadcms/ui/elements/Table";

export function ProductImagePreview(props: CellComponentProps) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
  const tablecell = useTableCell();

  console.log(tablecell);

  return <div className="mb-4"></div>;
}

But it's not documented anywhere and for the life of me I cannot remember where I found the snippet, I scoured the Discord. Looks like some types are missing as well

stuck marten