Uploading a file to backend creates an empty row

Questions and Answers Strapi Backend
1
System Information
  • Strapi Version: 4.10.1
  • Operating System: Windows
  • Database: SQLite
  • Node Version: v16.15.1
  • NPM Version: 8.11.0

I’m trying to build a simple Nuxt app to try Strapi properly. I have a test table “Pruebas” with a Media field called “Archivos”. I’ve looked at a lot of similar problems, and all of them seem to point me to the same answer, to create a FormData variable, and to append my files to it, and then pass that variable to the data attribute of the Axios request.

async sendFormInfo() {
      try {
        let formData = new FormData()
        formData.append("Archivos", this.files[0])

        await axios.post('http://localhost:1337/api/pruebas',
        {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          data: formData
        }
        ).then(response => {
          console.log(response.data);

          console.log(formData)
        });
      } catch (error) {
        console.log(error)
      }
    },
    deleteDropFile(index) {
      this.files.splice(index, 1);
    }
  }
}

The variable this.files is an array of files with the following structure:

this.file: [
    [lastModifiedValue, lastModifiedDateValue, nameValue, sizeValue, typeValue, webkitRelativePathValue],
    [lastModifiedValue, lastModifiedDateValue, nameValue, sizeValue, typeValue, webkitRelativePathValue],
    //...
]

All of these values are generated by my buefy file input

<b-upload v-model="files" multiple drag-drop expanded>
      <!-- A section with a div, a paragraph and an icon -->            
</b-upload>

The problem has to do with the FormData.append() part, because when I tray to console.log the variable, it turns out to be empty, but if I print my this.files variable, there’s the uploaded files in it.

It doesn’t show any error message, but it creates an empty row in my test table.

2

You seem to be attempting to append an ‘array’ value to a FormData entry. According to the MDN documentation, the second parameter to FormData.prototype.append should be either a string or a Blob. If neither, it is converted to a string. The default string conversion for an array tries to produce a comma-separated list of strings generated from its values. I doubt that’s what the ‘controller’ receiving the POST request expects. Assuming this is an ordinary ‘collection’ content type, the default controller for a collection expects a JSON formatted object - REST API | Strapi Documentation … Odds are, you’re getting an empty row because the default controller can’t see any field name/value pairs.

Also, you can’t just log a FormData object; it’s a special kind of ‘map’. If you want to see the values after you have appended/set them, you probably need to use FormData.prototype.entries() to get the key/value pairs as an array.