Hi, People!
Could you help me out?
Am I doing something wrong?
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>