Uploading files to Strapi entry using Nuxt.js and formData

Questions and Answers
1
System Information
  • Strapi Version: 3.6.5
  • Operating System: Server ? Ubuntu
  • Database: mongodb
  • Node Version: unknown
  • NPM Version: unknown
  • Yarn Version: unknown

I’m trying to upload profile picture to user entries upon creation or updating. previously using formData() I could append stringfied data, and files like this:

formData.append('files.field', field, field.name)
formData.append('data', JSON.stringify(this.form))

Tried to do so but it didn’t work. Had to basically append every field separately like

formData.append('firstName', this.form.firstName)
formData.append('lastName', this.form.lastName)

Tried appending files after this fields, when I submit everything gets updated except profile picture.

here’s my profilePicture object

  "firstName": "John",
  "lastName": "Doe",
  "profilePicture": {
    "id": 41,
    "name": "ben-parker-OhKElOkQ3RE-unsplash.jpeg",
    "alternativeText": "",
    "caption": "",
    "width": 449,
    "height": 450,
    "formats": {
      "thumbnail": {
        "ext": ".jpeg",
        "url": "/uploads/thumbnail_ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3.jpeg",
        "hash": "thumbnail_ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3",
        "mime": "image/jpeg",
        "name": "thumbnail_ben-parker-OhKElOkQ3RE-unsplash.jpeg",
        "path": null,
        "size": 4.35,
        "width": 156,
        "height": 156
      }
    },
    "hash": "ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3",
    "ext": ".jpeg",
    "mime": "image/jpeg",
    "size": 27.58,
    "url": "/uploads/ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3.jpeg",
    "previewUrl": null,
    "provider": "local",
    "provider_metadata": null,
    "created_at": "2021-11-28T15:11:07.490Z",
    "updated_at": "2021-11-28T15:11:07.501Z"
  },

and this is how I update user profile

//data
  data() {
    return {
      imagePreview: '',
      files: [],
      edit: false,
      userProfile: {
        firstName: '',
        lastName: '',
      },
      password: '',
      saveButton: 'disabled',
      view: 'userInfo',
      confirmation: '',
    }
  },
//methods
addFile(e) {
      var reader
      this.files = e.target.files || e.dataTransfer.files
      if (!this.files) return

      reader = new FileReader()

      reader.onload = (e) => {
        this.imagePreview = e.target.result
      }

      reader.readAsDataURL(this.files[0])
    },

    async updateAllUserInfo(e) {
      const formData = new FormData()
      let Image = this.imagePreview
      formData.append('firstName', this.userProfile.firstName)
      formData.append('lastName', this.userProfile.lastName)
      formData.append('files.profilePicture', Image)
      await this.$strapi.$users
        .update(this.$strapi.user.id, formData)
        .then((res) => {
          this.$strapi.user = res
          this.$store.commit('setAndUpdateUser', res)
          this.$toast.success('Successfully updated!!')
          console.log(res)
        })
        .catch((error) => {
          this.$toast.error('Successfully failed!!')
          console.error(error)
        })

      this.saveButton = 'disabled'
    },

Why it doesn’t work for me ?