File successfully uploaded but doesn't exist in the record

Questions and Answers
1
System Information
  • Strapi Version: 3.6.3
  • Operating System: Ubuntu server
  • Database: postgress
  • Node Version: v14

Using nuxt.js on the frontend. Trying to create a form, it gets created, and files are successfuly uploaded to media library, but files field in the record is empty. Why’s that?

I even followed this Strapi/Nuxt tutorial and basically copied and pasted everything at some point and created the same collection but it doesn’t work.

my Nuxt.js code:

<template>
  <div class="w-4/5 mx-auto my-12 overflow-hidden text-center md:w-1/2">
    <form ref="form" @submit="createPost">
      <h2 class="mt-5 text-2xl font-bold md:text-4xl">Create a new post</h2>

      <input
        v-model="form.Name"
        name="Title"
        type="text"
        placeholder="title"
        class="w-full p-3 my-3 border"
      />

      <input
        v-model="form.Description"
        name="description"
        type="text"
        placeholder="description"
        class="w-full p-3 my-3 border"
      />

      <input
        type="file"
        name="Image"
        class="w-full p-3 my-3 border"
        @change="assignFileInput()"
        multiple="multiple"
      />

      <button
        class="button--green"
        :disabled="
          form.Nmae === '' || form.Description === '' || fileInput === ''
        "
        type="submit"
      >
        Create
      </button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        Name: '',
        Description: '',
        // users_permissions_user: this.$strapi.user,
      },
      fileInput: '',
    }
  },
  methods: {
    async createPost(e) {
      const formData = new FormData()
      let Image
      const formElements = this.$refs.form.elements
      formElements.forEach((el, i) => {
        if (el.type === 'file') {
          Image = el.files[0]
        }
      })
      formData.append(`files.name`, Image, Image.name)
      formData.append('data', JSON.stringify(this.form))
      e.preventDefault()
      await this.$strapi.$experiments.create(formData)
      this.form.Name = ''
      this.form.Description = ''
      console.log(formData)
    },
    assignFileInput() {
      const formElements = this.$refs.form.elements
      formElements.forEach((el, i) => {
        if (el.type === 'file') {
          this.fileInput = el.files[0] !== undefined ? el.files[0].name : ''
        }
      })
    },
  },
}
</script>
<style></style>