Hello guys,
I’m trying to send a POST request using axios + Nuxt.js to submit a form which contains a file input type. My focus is to handle the submit event.
Following the documentation I created the index.vue component:
Code: https://pastebin.com/WbmPkTDT
I’m giving a 404 error, as you can try here:
Demo: https://formapi.netlify.com/
Any suggestion are really appreciated.
Thank you 
UPDATE
I solved the 404 error, my submission is now visible inside the Netlify Form dashboard but the attach field is empty. Only the name field is correctly populated.
Here is the updated index.vue component:
<template>
<div class="question-form">
<form name="ask-question2"
method="post"
data-netlify="true"
data-netlify-honeypot="bot-field"
@submit.prevent="handleSubmit"
enctype="multipart/form-data">
<input type="hidden" name="form-name" value="ask-question2" />
<ul>
<li>
<label>
Name:
<input
type="text"
name="name"
@input="ev => name = ev.target.value"
>
</label>
</li>
<li>
<label>
Upload:
<input
type="file"
name="attach"
ref="file"
@change="addFile()"
>
</label>
</li>
</ul>
<button type="submit" class="submit-button">Send</button>
</form>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
name: '',
attach: null,
};
},
computed: {
form() {
return {
name: this.name,
attach: this.attach,
}
},
},
methods: {
addFile() {
this.attach = this.$refs.file.files[0];
},
encode(data) {
return Object.keys(data)
.map(
(key) =>
`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`,
)
.join('&')
},
handleSubmit() {
const self = this
const axiosConfig = {
header: { "Content-Type": "multipart/form-data" }
};
axios.post(
"/",
self.encode({
'form-name': 'ask-question2',
...self.form,
}),
axiosConfig
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
};
</script>
Demo: https://formapi.netlify.com/
Any suggestion are really appreciated.
Thank you
Hi @Perry thank you very much for your reply.
I finally found a solution, I was bad encoding the attach data.
Now is working with nuxt.js and axios.
Here is the updated encode methods:
encode(data) {
const formData = new FormData();
for (const key of Object.keys(data)) {
formData.append(key, data[key]);
}
return formData;
}
Cheers!