Custom Cell View for Upload Field in Payload

[dull valley]

👋 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?

[crimson junco]

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

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Upload Field - Filtering upload options
• UI Field
• Relationship Field - Example
• Swap in your own React components - Globals - Global views
• Fields Overview - Validation

Community-Help:

• Running the demo

[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]

For payload v3 (next.js), I created a react custom component to display the Thumbnail of the Media relationship vs the filename. Here is a public gist of the component:
https://gist.github.com/carlosbensant/f3b30d856bc23d74a8ca0d8c2eee06cc