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?

Answer 1

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));