Uploading a file to backend creates an empty row

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 => {

      } catch (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 -->            

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.

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.