[v4] Uploading file during entry creation

Questions and Answers
1
System Information
  • Strapi Version: 4.0.5
  • Database: AWS PostgreSQL

I have the following code to upload an image and create an entry. It used to work just fine in v3:

const formData = new FormData()
const temp = {
  title: this.submitAssignmentFormData.title,
  description: this.submitAssignmentFormData.description,
  assignment: this.$route.params.id,
}
formData.append('data', JSON.stringify(temp))
formData.append(
  'files.file',
  this.submitAssignmentFormData.file,
  this.submitAssignmentFormData.fileName
)

this.$axios.post('/assignment-works', formData) // that actually goes to http://localhost:1337/api/assignment-works
  .then(res => {
    // ...do something with res
  })
  .catch(err => {
    console.error(err)
  })

As I said above, it used to work just fine in v3. Now that I’m rewriting everything to v4 I’m getting the following error 400:

Invalid payload submitted for the creation of an entity of type assignmentWork. Expected an object, but got undefined

Looking at the request I see that I’m sending the following as payload:

-----------------------------17373324730703011584052438468
Content-Disposition: form-data; name="data"

{"title":"My image","description":"","assignment":"1"}
-----------------------------17373324730703011584052438468
Content-Disposition: form-data; name="files.file"; filename="IKP_3729 copy.jpg"
Content-Type: image/jpeg

ÿØÿáñExif... rest of the image code

I tried to console log the form data

console.log(Object.fromEntries(formData))

and I’m getting the object with all the data:

Object { data: "{\"title\":\"My image\",\"description\":\"\",\"assignment\":\"1\"}", "files.file": File }

So why am I getting this error all of a sudden? What am I doing wrong and how to make it work?

2

any news with the above?