Ajax file upload Vue.js

Question

I am trying to upload a file via Ajax using Vue.js - however, the server keeps responding saying that the file needs to be an image (It works when it isn't using ajax). The setup I have is as follows:

<input type="file" name="avatar" v-model="profileFormData.avatar">

And my data is:

profileFormData: {
            "name": '',
            "email": '',
            "avatar": '',
        },

Is there something specific I need to do for file uploads?

G. Hanson · Accepted Answer · 2016-04-28 11:33:31Z

2

I seem to have found the fix for this. Firstly I had to remove the v-model from the form element (and every element within that form). Then rather than posting v-model, get the data to send using FormData.

Here is an example:

//Pass the form into a new FormData object
var formData = new FormData(this.el);

//Pass through the object instead of data passed via a v-model
    this.vm
        .$http[this.getRequestType()](this.el.action, formData)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this));

answered Apr 28, 2016 at 11:33

G. Hanson

531 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ajax file upload Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related