Home
Support Forums

Nuxt async file send form: All data received only Upload file is empty

Hi, People!

Could you help me out?
Am I doing something wrong? :smiley:

image

avfall.netlify.app/vacancies/vacancies/project-manager

<template>
  <section>
    <div class="container">
      <div class="max-w-2xl m-auto">
        <div class="flex flex-col md:flex-row   items-start justify-between mb-16">
          <div class="mb-6">
            <h1 class="text-4xl gradient-text mb-1 block ">{{$prismic.asText(vacancy.title)}}</h1>
          </div>
          <a href="#applyForVacancy" class="btntest   text-xl text-black-light flex items-center reveal--FadeUp ">
            {{$t('apply')}}
            <div
              class="text-primary border-primary border w-11 h-11 flex items-center justify-center ml-6 transform rotate-45  ">
              <IconArrowRight class="h-6 w-6 stroke-current   transform rotate-45" />
            </div>
          </a>
        </div>
        <prismic-rich-text class="vacancy__content" :field="vacancy.description" />
        <div id="applyForVacancy" class=" mt-16 border-t border-gray-light pt-8">
          <div class="text-4xl gradient-text  font-semibold mb-8 text-center">{{$t('applyForVacancy')}}</div>
          <div class="w-full mb-8">
            <div class=" max-w-lg mx-auto">
              <div class="  py-12 px-10 sm:px-12 lg:px-16">
                <form name="vacancies" method="POST" netlify @submit.prevent="sendForm" action="/" id="myForm"
                  ref="formTag" data-netlify="true" data-netlify-honeypot="bot-field">
                  <input type="hidden" name="form-name" value="vacancies" />
                  <div class="grid grid-cols-1 gap-6">
                    <label class="input-block">
                      <span class="text-gray-dark">{{$t('fullName')}}</span>
                      <input type="text" name="name" :placeholder="$t('fullNameValue')" v-model="name" />
                    </label>
                    <label class="input-block">
                      <span class="text-gray-dark">{{$t('email')}}</span>
                      <input type="email" name="email" v-model="email"
                        class="mt-2 py-3 block w-full rounded border-grayGreen focus:border-primary focus:border-opacity-70 focus:ring focus:ring-primary focus:ring-opacity-80"
                        placeholder="lotfizadeh@domain.com" />
                    </label>
                    <label class="input-block">
                      <span class="text-gray-dark">{{$t('phone')}}</span>
                      <input type="Tel" name="phone" v-model="phone"
                        class="mt-2 py-3 block w-full rounded border-grayGreen focus:border-primary focus:border-opacity-70 focus:ring focus:ring-primary focus:ring-opacity-80"
                        placeholder="+994 00 000 00 00 " />
                    </label>
                    <div class="flex ">
                      <label for="file-upload"
                        class="relative cursor-pointer bg-white rounded-md  focus:border-primary focus:border-opacity-70 focus:ring focus:ring-primary focus:ring-opacity-80 transition-all transform  active:scale-95">
                        <div
                          class="flex items-center  hover:opacity-60 hover:text-white border-2 border-primary pl-2 pr-4 py-2">
                          <IconUpload class="h-6 w-6 text-primary stroke-current mr-2" alt="IconUpload" />
                          <span v-if="file" class="text-accent font-semibold"> {{file.name}}</span>
                          <span v-else class="text-primary font-semibold">{{$t('uploadFile')}}</span>
                        </div>

                        <input id="file-upload" name="file-upload" type="file" accept=".pdf,.doc,.docx" class="sr-only"
                          @change="fileAdded">
                      </label>
                      <!-- <p class="pl-1">or drag and drop</p> -->
                    </div>


                    <div class="block">
                      <div class="mt-2">
                        <div>
                          <label class="inline-flex items-start">
                            <input type="checkbox"
                              class="mt-1 h-4 w-4  border-gray text-primary  focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-80"
                              checked />
                            <span class="text-gray ml-3">{{$t('agreeRules')}}</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex justify-end mt-8">
                    <button
                      class="bg-primary relative  py-2 px-8  text-lg text-white font-semibold inline-block active:bg-secondary transition active:scale-90	 transform"
                      :disabled="isSending" :class="{'disabled:bg-secondary': isSending}">
                      <span :class="{'invisible': isSending}">{{$t('send')}}</span>
                      <div v-show="isSending"
                        class="absolute w-5 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ">
                        <div id="loader"></div>
                      </div>
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
  import IconArrowRight from '~/assets/icons/arrow-right.svg?inline'
  import IconUpload from '~/assets/icons/upload.svg?inline';

  export default {
    components: {
      IconArrowRight,
      IconUpload,
    },
    data: () => ({
      vacancy: null,
      data: null,
      name: null,
      email: null,
      phone: null,
      file: null,
      isSending: false,
    }),
    async asyncData({
      params,
      $prismic,
      error,
      app
    }) {
      // try {
      const currentLocale = app.i18n.locales.filter((lang) => lang.code === app.i18n.locale)[0]
      const vacancy = await $prismic.api.getByUID('vacancies', params.uid, {
        lang: currentLocale.iso.toLowerCase()
      });
      if (vacancy) {
        return {
          vacancy: vacancy.data,
          altLangs: vacancy.alternate_languages
        }
      } else {
        error({
          statusCode: 404,
          message: 'Page not found'
        })
      }

    },
    methods: {
      async sendForm() {
        this.isSending = true;
        let formName = this.$refs.formTag.getAttribute('name');

        let formData = new FormData();
        formData.append('name', this.name);
        formData.append('email', this.email);
        formData.append('phone', this.phone);
        formData.append('file', this.file);
        formData.append('form-name', formName);

        console.log('formmmmm', formData);
        fetch('/', {
            method: 'POST',
            // On netlify forum written that this must be commented 
            // headers: {
            //   'Accept': "application/json",
            //   'Content-Type': 'multipart/form-data',
            // },
            body: formData
          })
          .then(() => {
            this.$toast.success('Successfully sent', {
              className: ['toast--success']
            })

            this.name = null,
              this.email = null,
              this.phone = null,
              this.file = null,
              this.isSending = false;
          })
          .catch((error) => {
            this.$toast.success('Error. The form has not been sent', {
              className: ['toast--error']
            })
            this.isSending = false;
            // alert(error)
          })

      },
      fileAdded($event) {
        this.file = null;
        this.file = $event.currentTarget.files[0];
        console.log(this.file)
        console.log($event.currentTarget.files)
      },

    },
  }

</script>

Hi @Zumrad

Try as I might, I cannot seem to get this form to work :confused:

Have a look at Netlify form with input type="file" + Nuxt.js return 404 thought, as this form (with the modification in post #3) does work (I believe it is taken from How to Integrate Netlify Forms in a Vue App | Netlify initially.)

I added the extra fields you use to the form (and used v-model instead of @input) along with adding the relevant values to the functions/data, and it works fine. It does use axios, so remember to add this to your project first.

Tried all possible ways but no result. The file is not appearing on netlify form. But file is attached and sent

This might help: