Support,
I have a website that uses netlify forms for our contact page.
The form seems to work under most situations, but when a .docx file is used in the file upload field the form goes to a 404 page for some reason.
Other file types like .txt seem to work fine.
Any ideas why file type would cause a 404 page?
Thanks,
J.P.
@jmspldnl, that’s a peculiar one. It does look like you are rendering and submitting your form via javascript (vue). Can you share your code for the form? How are you handling your input field values?
<template>
<div>
<h1 class="text-center text-primary">Contact Us
<small class="text-success">Send us your resume</small>
</h1>
<b-card-group
class="flex-sm-column flex-md-row"
deck>
<b-card
class="mb-3 mb-md-4"
border-variant="primary"
img-top
img-src="~assets/img/contact.jpg"
img-alt="Contact information below">
<div class="card-block lead">
<contact-info/>
</div>
</b-card>
<b-card
class="mb-3 mb-md-4"
border-variant="primary"
header="Send us your resume or a message..."
header-tag="h5"
header-bg-variant="primary"
header-text-variant="white">
<form
action="/contact"
enctype="multipart/form-data"
method="post">
<b-form-group
v-for="field in fields"
:key="field.id"
:id="`group-${field.id}`"
:class="{ 'd-none': field.honeypot }"
:aria-hidden="field.honeypot"
:label="field.label"
:label-for="`contact-${field.id}`">
<b-file
v-if="field.type === 'file'"
:id="`contact-${field.id}`"
:name="`contact-${field.id}`"
/>
<b-textarea
v-else-if="field.type === 'textarea'"
:id="`contact-${field.id}`"
:name="`contact-${field.id}`"
:rows="3"
v-model.trim="field.value"
/>
<b-input
v-else
:id="`contact-${field.id}`"
:name="`contact-${field.id}`"
:required="field.required"
:type="field.type"
v-model.trim="field.value"
/>
</b-form-group>
<div class="form-group row">
<div class="col">
<span>* = Required</span>
</div>
<div class="col text-right">
<b-btn
type="submit"
variant="primary">Submit
</b-btn>
</div>
</div>
</form>
</b-card>
</b-card-group>
</div>
</template>
<script>
import contactInfo from '~/components/contact-info.vue'
export default {
components: {
'contact-info': contactInfo
},
data() {
return {
contact: {
first: null,
last: null,
email: null,
industry: null,
resume: null,
message: null
},
fields: [
{'id': 'name', 'honeypot': true},
{'id': 'first', 'label': 'First Name *', 'required': true},
{'id': 'last', 'label': 'Last Name *', 'required': true},
{'id': 'email', 'label': 'Email *', 'required': true, 'type': 'email'},
{'id': 'resume', 'label': 'Upload Resume', 'type': 'file'},
{'id': 'message', 'label': 'Message', 'type': 'textarea'}
]
}
},
computed: {
email() {
return this.$options.filters.obfuscate('contact@igrecruiting.com')
},
phone() {
return this.$options.filters.obfuscate('9374168515')
},
phoneLong() {
return this.$options.filters.obfuscate('(937) 416-8515')
}
},
methods: {
file(e) {
this.contact.resume = e.target.files[0]
}
}
}
</script>Yes, it’s very weird that the form seems to work most of the time, but only a certain file type seems to go to a 404.
Sorry for late reply, thanks to anyone that takes a look!
Hi there,
There isn’t a general incompatibility with Netlify Forms and docx files. I can successfully upload them on some of my demo sites, including this one: https://github.com/futuregerald/react-netlify-form-file
Note that I’m using React in that example and not Vue, but that shouldn’t matter. Can you provide a specific file that you are trying to upload that isn’t working for you?