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

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

.

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

I upload an image to my

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

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

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

still returns

. Really stumped here

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

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

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