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.

You can not send FormData as a single parameter, in combination with other parameters. (Well, you can, but that won't make sense to the receiver.) You need to append type and user_id to the FormData object, same as you did with the file, and then send only the plain FormData object. — C3roe
– C3roe, Commented Dec 8, 2021 at 12:41
@CBroe I have appended both type and user_id to the formData just like you said, i'm still getting the same error, and when i use dev tools network to check the payload for the request, the file is an empty object. — payose
– payose, Commented Dec 8, 2021 at 12:52
And did you modify what you are passing as second parameter to the post method as well? — C3roe
– C3roe, Commented Dec 8, 2021 at 12:56
@CBroe this is what i now have after appending both to fd ``` let response = await this.$axios.post('/staff/customer/add/document', { file: fd }) ``` — payose
– payose, Commented Dec 8, 2021 at 12:59
You need to send only the formdata object. Right now, you are still trying to send an object, that contains the formdata object under a property name file. { file: fd }-> fd — C3roe
– C3roe, Commented Dec 8, 2021 at 13:38

payose · Accepted Answer · 2025-03-22 15:24:27Z

Solved this using @C3roe 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)
                }

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related