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: Nuxt.js + Netlify form with input file - Pastebin.com
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
perry
September 12, 2019, 5:14pm
3
hi! I posted this on another thread as well, but did you look through these examples already?
Using that repo as a guide, I was able to get a ‘single’ File sent after validation. However I can’t seem to get Netlify to recognise multiple files within the Filelist object that is sent for a single field. I even tried creating a new array with the given File objects instead, but the response for that field Netlify side is then blank:
function encode(data) {
const formData = new FormData();
for (const key of Object.keys(data)) {
if(key === 'repairs_files'){
const files = Objec…
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!
2 Likes
perry
September 13, 2019, 5:34pm
5
thanks for posting your solution, @andreaweb !