Netlify form with input type="file" + Nuxt.js return 404

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 :beers:

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 :beers:

hi! I posted this on another thread as well, but did you look through these examples already?

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! :beers:

2 Likes

thanks for posting your solution, @andreaweb!