formdata.append not working when submiting a form using vuejs or vuex

Question

I do have this form and i have another component that use vue2-dropzone to upload files. When choosing the files the $store state uploads will be updated. My issue is when am submiting the form so the FormData not sending the files. formdata.append not working. I do check under networks and i can see that formdata is equal to {}. What i did for wrong please.

<form class="outer-repeater" @submit.prevent="submitTask">
              <div data-repeater-list="outer-group" class="outer">
                <div data-repeater-item class="outer">
                  <div class="form-group row mb-4">
                    <label for="taskname" class="col-form-label col-lg-2">Task Name</label>
                    <div class="col-lg-10">
                      <input
                          id="taskname"
                          name="taskname"
                          type="text"
                          class="form-control"
                          placeholder="Enter Task Name..."
                          v-model="task.title"
                      />
                    </div>
                  </div>
                  <div class="form-group row mb-4">
                    <label class="col-form-label col-lg-2">Task Description</label>
                    <div class="col-lg-10">
                      <ckeditor :editor="editor" v-model="task.description"></ckeditor>
                    </div>
                  </div>
    
                  <div class="form-group row mb-4">
                    <label class="col-form-label col-lg-2">Task Date</label>
                    <div class="col-lg-10">
                      <date-picker v-model="task.daterange" range append-to-body lang="en" confirm></date-picker>
                    </div>
                  </div>
    
                  <div class="inner-repeater mb-4">
                    <div class="inner form-group mb-0 row">
                      <label class="col-form-label col-lg-2">Add Team Member</label>
                      <div
                          class="inner col-lg-10 ml-md-auto"
                      >
                        <div class="mb-3 row align-items-center">
                          <div class="col-md-12">
                            <multiselect v-model="task.teamMember" label="name" :options="options" :multiple="true"
                                         :taggable="true"></multiselect>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row mb-4">
                    <label for="taskbudget" class="col-form-label col-lg-2">Budget</label>
                    <div class="col-lg-10">
                      <input
                          id="taskbudget"
                          name="taskbudget"
                          type="text"
                          placeholder="Enter Task Budget..."
                          class="form-control"
                          v-model="task.budget"
                      />
                    </div>
                  </div>
                  <div class="form-group row mb-4">
                    <label for="taskbudget" class="col-form-label col-lg-2">Ladda up</label>
                    <div class="col-lg-10">
                      <uploads/>
                    </div>
                  </div>
    
                </div>
              </div>
              <div class="row justify-content-end">
                <div class="col-lg-10">
                  <button type="submit" class="btn btn-primary" >Create Task</button>
                </div>
              </div>
            </form>

  methods: {
 
    files(){
      return this.$store.state.uploads.uploads
    },
 
    submitTask() {
      let formData = new FormData();
      for (var i = 0; i < this.files.length; i++) {
        let file = this.files[i];
        formData.append('files[' + i + ']', file);
        console.log(file)
      }
      formData.append('task',this.task)
      axios.post('http://test.local/wp-json/mytestapi/submitTodo',
          {
            formData,
            headers: {
              'Content-Type': 'multipart/form-data;boundary=' + Math.random().toString().substr(2),
            }
          }).then(res => {
        console.log(res.data)
      }).catch(res => {
        console.log(res)
      })

    },

  },

Answer 1

If you want multiple files in an array like that, you have to append the exact field name each time. Don't add the index and you don't need the brackets:

formData.append('files[' + i + ']', file); // ❌ Wrong

formData.append('files', file); // ✅ Correct, use the same name each time

When you axios.post, the formData should be the 2nd argument:

const url = 'http://test.local/wp-json/mytestapi/submitTodo';
axios.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})