Form not working with docx files

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.

@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?

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?