Skip to main content
Solved

Accessing attachment thumbnail URL from record value

  • February 2, 2021
  • 4 replies
  • 39 views
S
Forum|alt.badge.img+13

I’m building a custom app and need to show an attachment’s thumbnail image as part of an info card.

When I enter <div>{record.getCellValue("Attachment field")}</div> to view the cell values, I get the following error:

Error: Objects are not valid as a React child (found: object with keys {linkedRecordId, value}). If you meant to render a collection of children, use an array instead.

I’ve tried adding record.getCellValue("Attachment field").fields.url but it comes up as undefined.

I’ve also tried {record.map(value => {value.url})} to try access the object’s properties but map is not a function of record.

How can I access the thumbnail’s URL?

Best answer by Kamille_Parks11

Try something like:

record.getCellValue("Attachment field")?.map(x => {
   var url= x.url
   return (<img src={url} />)
})

    4 replies

    Kamille_Parks11
    Forum|alt.badge.img+27
    • Kamille_Parks11
    • Brainy
    • 2679 replies
    • Answer
    • February 2, 2021

    Try something like:

    record.getCellValue("Attachment field")?.map(x => {
   var url= x.url
   return (<img src={url} />)
})
    E
    Forum|alt.badge.img+11
    • Emma_Yeap
    • Inspiring
    • 55 replies
    • February 2, 2021

    Hi Michael,

    Adding on to Kamille’s solution: the cell value formats for all the different field types are documented here: Airtable Blocks SDK

    The cell value for attachment fields is an array of attachment objects (even if there’s only one attachment), so you’ll need to get the url(s) from those individual attachment objects.

    S
    Forum|alt.badge.img+13
    • Sticker_ninja
    • Author
    • Inspiring
    • 15 replies
    • February 3, 2021

    Right on, thanks to @Kamille_Parks and @Emma_Yeap I was able to piece it together:

    {record.getCellValue("Lookup attachment field")?.map(x => {
    var url= x.value.thumbnails?.large?.url
    return (<img src={url} />)
})}

    The extra value property is what allows this to work with a lookup field pointing to an attachment in another table if that is helpful to anyone.

    Kamille_Parks11
    Forum|alt.badge.img+27

    Right on, thanks to @Kamille_Parks and @Emma_Yeap I was able to piece it together:

    {record.getCellValue("Lookup attachment field")?.map(x => {
    var url= x.value.thumbnails?.large?.url
    return (<img src={url} />)
})}

    The extra value property is what allows this to work with a lookup field pointing to an attachment in another table if that is helpful to anyone.


    To clarify for others only add .value if you’re pulling from a Lookup field. This question was asked regarding Attachment fields. Actual attachment fields do not return a value property within the object returned by .getCellValue().


    Terms & ConditionsAccessibility statement