upload manual with axios

[aneira92]

I have tried uploading the files manually with axios and have not been successful, any way to do this?

[swina]

<template>
<div>
//do not set uploadUrl in the component but use a button to call your own upload function
<vue-file-agent 
      :multiple="true"
      :deletable="true"
      :editable="true"
      ref="vueFileAgent" v-model="fileRecords"></vue-file-agent>

<button v-if="uploadFiles.length" @click="uploadFiles>Upload files</button>
</div>
</template>
<script>
export default {
data:()=>({
    fileRecords: [],
     uploadUrl: 'your endpoint to upload'
}),
methods:{
  uploadFiles (){
      this.fileRecords.forEach ( ( file ,index) => {
          //create a form data
          let formData = new FormData()
         //add input file and append the file object ( file.file )
          formData.append("files", file.file )
          //post form to your endpoint adding the content type headers
          axios.post ( uploadUrl , 
                 formData ,
                 {   
                    headers: {
                       "Content-Type": "multipart/form-data"
                   }
           }).then ( response => { 
                 //remove entry from the array
                 this.fileRecords.splice ( index , 1 )
                 console.log ( response ) 
           })
      }
  }
}
}
</script>
...

[hkmsadek]

how do you upload more than one files at once instead of sending it one by one?

[samantrader]

<template>
<div>
//do not set uploadUrl in the component but use a button to call your own upload function
<vue-file-agent 
      :multiple="true"
      :deletable="true"
      :editable="true"
      ref="vueFileAgent" v-model="fileRecords"></vue-file-agent>

<button v-if="uploadFiles.length" @click="uploadFiles>Upload files</button>
</div>
</template>
<script>
export default {
data:()=>({
    fileRecords: [],
     uploadUrl: 'your endpoint to upload'
}),
methods:{
  uploadFiles (){
      this.fileRecords.forEach ( ( file ,index) => {
          //create a form data
          let formData = new FormData()
         //add input file and append the file object ( file.file )
          formData.append("files", file.file )
          //post form to your endpoint adding the content type headers
          axios.post ( uploadUrl , 
                 formData ,
                 {   
                    headers: {
                       "Content-Type": "multipart/form-data"
                   }
           }).then ( response => { 
                 //remove entry from the array
                 this.fileRecords.splice ( index , 1 )
                 console.log ( response ) 
           })
      }
  }
}
}
</script>
...

Hi How can send all files with one axios call ?