Support,
I have a website that uses netlify forms for our contact page.
https://igrecruiting.com
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.
Dennis
October 29, 2019, 8:37am
3
@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>
@Dennis
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: GitHub - 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?
Dima
March 17, 2022, 7:16pm
8
Hi futuregerald
I used a code structure like yours, but my project uses formik for validation. I can’t file upload in netlify forms. On submission, the file object is in FromData, but when form data arrives in netlify forms, everything is displayed except for the file. Instead of a link to a file, I get a set of characters in the object. Can you help me?
Hey @Dima ,
Files would appear in forms only when they’re submitted as mentioned in the docs:
Could you confirm if that’s the case?