how to send files using formData() in an api request using vuejs and axios

Question

I want to upload a file to the server via an API. On documenter.getpostman, this is how to use the API

--form 'type="1"' \
--form 'user_id="1"' \
--form 'file=@"/C:/Users/xxx/Downloads/xxx.postman_collection.json"' 

This is what I did

                try {
                    const fd = new FormData()
                    fd.append('file', this.dropFiles)
                
                    let response = await this.$axios.post('/staff/customer/add/document', {
                        type: this.uploadType,
                        user_id: this.user_id,
                        file: fd,
                    })

                    console.log(response.data.success)    
                }
                catch(err){
                     console.log(err)
                }

this.dropFiles contains the files from the input type="file", and i'm able to see its contents when I log it to the console, but logging fd which carries the form data always returns an empty object. And type: this.uploadType, user_id: this.user_id are other params i'm sending to the api

The request always returns 400(bad request)

Error: Request failed with status code 400
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.onloadend (xhr.js?b50d:54)

I'm not sure if the API wants the path to the file, because, I have tried hard coding the file path into the request like this

let response = await this.$axios.post('/staff/customer/add/document', {
    type: this.uploadType,
    user_id: this.user_id,
    file: '/home/myDevice/Downloads/download.jpeg',
})

but still, get the same response. Please I need all the help i can get, thanks.

Answer 1

Solved this using @CBroe comment. I appended both type and user_id into the formData, and then passed in formData object.

                try {
                    const fd = new FormData()
                    fd.append('file', this.dropFiles)
                    fd.append('type', this.uploadType)
                    fd.append('name', this.fileName)
                    fd.append('user_id', this.user_id)
                
                    let response = await this.$axios.post('/staff/customer/add/document', fd)

                    console.log(response.data.success)    
                }
                catch(err){
                     console.log(err)
                }