Attaching an already uploaded file to a collection's upload field?

default discord avatar
geeberry
3 months ago
7

Hey there. Running into an issue trying to create an item with an already uploaded images data. I have a collection called Location with a field called

bannerImage

.



{
  name: 'bannerImage',
  type: 'upload',
  relationTo: 'media',
 },


I upload an image to my

Media

collection using its own create endpoint. I then get all that returned data (id, url, width, height etc) and I want to create a

Location

with a bannerImage using the previously uploaded media item.



const bannerData = { ...id, url, width, height etc }
const body = {
  ...,
  bannerImage: bannerData
}


However, I get the following error trying to create the item



{
  errors: [
    {
      name: 'ValidationError',
      message: 'The following field is invalid: bannerImage',
      data: [
        {
          message: 'This field is not a valid upload ID.',
          field: 'bannerImage'
        }
      ]
    }
  ]
}


I can confirm the image properly uploads, the the ID is the same. Any hints here?



Attaching an uploaded file to a collection's image field using REST API?



I've also just switched to using the Local API and I get the same error there as well



Trying to get more detail - tried everything I can think of, double checked all the docs...



My image id is

6477f2fa109ea483339aef9d

await payload.create({
      collection: 'locations',
      data: { ...body, bannerImage: { id: "6477f2fa109ea483339aef9d" }},
    })


still returns

This field is not a valid upload ID.

. Really stumped here



I found this comment which seems to be what I'm doing here:



https://discord.com/channels/967097582721572934/1087792826630287493/1095447735592812574


Attaching an already uploaded file to a collection's upload field?



Adding some more context...



My upload functin that grabs a remote image, blobs it, then uploads to my media collection:



const uploadImage = async (fileName: string) => {
  const newF = getFileOrImage(fileName)
  const formData = new FormData()
  const blob = await fetchBlob(newF.url)
  formData.append('file', blob, `${newF.assetId}.${newF.extension}`)

  const options = {
    method: 'POST',
    body: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  }

  // @ts-ignore
  delete options.headers['Content-Type']

  const res = await fetch('http://localhost:3000/api/media', options)
  const data = await res.json()

  return data?.doc
}


And the function that takes the data from that uploaded image, including id, and attempts to attach it to a

bannerImage

field on my collection:



 const body: Location = {
    ...rest,
    bannerImage: bannerData,
  }

  try {
    const res = await payload.create({
      collection: 'locations',
      data: body,
    })
  } catch (error) {
    console.error('Error:', error)
  }


Image upload works and returns fine, collection create returns the invalid ID stuff



yeesh - ok I figured it out. my bannerImage need to just be a string, an ID instead of the full object. so



bannerImage: "6477f2fa109ea483339aef9d"
    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.