Upload file during creation with Component not working correctly

[freloe]

Bug report

Required System information

• Node.js version: 14.19.3
• YARN version: 1.22.19
• Strapi version: 4.1.12
• Database: sqlite
• Operating system: Ubuntu 20.04.4 LTS

Describe the bug

Uploading via the multiform/form-data to an Object with a file inside a Component doesn't correctly link/save the file in the Component.
Other file uploads to the root data, not in a Component, work correctly.

Expected behavior

File should show up in the Component

Data Model

The Collection Type

{
    "kind": "collectionType",
    "collectionName": "recommendation_information_all",
    "info": {
    "singularName": "recommendation-information",
    "pluralName": "recommendation-information-all",
    "displayName": "Recommendation_Information",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {},
  "attributes": {
    "recommendation": {
      "type": "component",
      "repeatable": false,
      "component": "contacts.professor"
    },
    "student": {
      "type": "relation",
      "relation": "oneToOne",
      "target": "api::student.student",
      "inversedBy": "recommendation_information"
    }
  }
}

The Component

{
  "collectionName": "components_contacts_professors",
  "info": {
    "displayName": "professor",
    "icon": "user-graduate",
    "description": ""
  },
  "options": {},
  "attributes": {
    "first_name": {
      "type": "string"
    },
    "last_name": {
      "type": "string"
    },
    "email": {
      "type": "email"
    },
    "recommendation_letter": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "files"
      ]
    },
    "title": {
      "type": "string"
    }
  }
}

Code thats not working

save(event) {
    event.preventDefault()
    return new Promise(async (resolve,reject) => {
      let formData = new FormData()
      formData.append("data",JSON.stringify({
          "recommendation":{
            "first_name":this.state.firstName,
            "last_name":this.state.lastName,
            "email":this.state.email,
            "title":this.state.title
          }
      }))
      console.log(this.state.letter)
        formData.append("files.recommendation[0].recommendation_letter",this.state.letter)
      let request = {
        method:"POST",
        body:formData
      }
      let result = await fetch('http://localhost:1337/api/recommendation-information-all',request)
      console.log(result)
      resolve(true)
    })
  }

Additional Context

Probably an unrelated Problem/Bug adding Relations during creation also doesn't seem to work

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/how-to-upload-an-image-via-rest-for-a-dynamic-zone-component/20543/4

[degoev]

Uploading to component works well if you add populate params for this component to the uploading request.

@freloe Try this:
let result = await fetch('http://localhost:1337/api/recommendation-information-all?populate[recommendation][populate]=%2A',request)

This bug occurs when code at this line can't resolve component id (because component is not populated)

[freloe]

Uploading to component works well if you add populate params for this component to the uploading request.

@freloe Try this: let result = await fetch('http://localhost:1337/api/recommendation-information-all?populate[recommendation][populate]=%2A',request)

This bug occurs when code at this line can't resolve component id (because component is not populated)

Thank you very much, that solved the issue!

[nikkizol]

Hey guys, is there any work around, I upload image in repeatable component via admin panel, but it get's somewhere else as I don't see it in that component table.

[derrickmehaffy]

Hey guys, is there any work around, I upload image in repeatable component via admin panel, but it get's somewhere else as I don't see it in that component table.

This issue should be fixed on the latest release, what version are you running?

[nikkizol]

@derrickmehaffy 4.4.3v