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

default discord avatar
3 months ago

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 = {, 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

This field is not a valid upload ID.

. 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 = {,
    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!


    Connect with the Payload Community on Discord



    Can't find what you're looking for?

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