How to send all files inside a B-Form-File in vuejs

  html, javascript, vue.js, vuejs2

I have an issue where I have two b-form-file and I can add the files there, but while saving the data it only takes one b-form-file file but not all.

Here is the HTML code:

               <b-col md="6">
                  <label>Name 1</label>
                    <b-form-file
                        accept=".pdf"
                        id="file_1"
                        ref="file_1"
                        @change="handleFileUpload()"
                        v-model="files"
                        placeholder="Choose a file or drop it here..."
                        drop-placeholder="Drop file here..."
                    ></b-form-file>
                </b-col>
                <b-col md="6">
                  <b-form-group label="Name 2">
                    <b-form-file
                        accept=".pdf"
                        id="file_2"
                        ref="file_2"
                        @change="handleFileUpload()"
                        v-model="files"
                        placeholder="Choose a file or drop it here..."
                        drop-placeholder="Drop file here..."
                    ></b-form-file>
                  </b-form-group>
                </b-col>

And here is the script for it:

   data () {
          return {
           files:[]
                 }
           },
   methods:{
   save(){
        let formData = new FormData()
        formData.append('file_1',this.file_1)
        formData.append('file_2', this.file_2)
        console.log(formData)
        },
        }
   handleFileUpload() {
        this.file_1 = this.$refs.file_1.files[0]
        this.file_2 = this.$refs.file_2.files[0]
       
      },

On consoling the log, I can see only file_1 is there, but not file_2. Please assist on how to solve it.

Source: Ask Javascript Questions

LEAVE A COMMENT