ContactForm.js

import React from 'react'
import { FormattedMessage } from 'react-intl'
import { navigateTo } from 'gatsby-link'

import s from './index.module.sass'

var Dropzone

// This try catch is here because dropzone accesses the 'window' property, which is not accessible on the server side
try {
  Dropzone = require('dropzone')
  Dropzone.autoDiscover = false
} catch (e) {
  console.error(e)
}

function encodeAsMultipart (data) {
  const formData = new FormData()

  Object.keys(data).forEach(name => formData.append(name, data[name]))

  return formData
}

// function encodeAsFormUrlEncoded (data) {
//   TODO
// }

class ContactForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      submitDisabled: false,
      myDropzone: null,
      formData: {}
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  componentDidMount () {
    const dropzone = new Dropzone('#myDropzone', {
      url: '/file/post',
      autoProcessQueue: false,
      parallelUploads: 100,
      maxFiles: 100
    })

    dropzone.on('addedfile', (file) => console.log('addedfile', file))
    dropzone.on('sendingmultiple', () => console.log('sendingmultiple'))

    this.setState({myDropzone: dropzone})
  }

  handleChange (e) {
    const newFormData = Object.assign({}, this.state.formData, {
      [e.target.name]: e.target.value
    })
    this.setState({
      formData: newFormData
    })
  }

  handleSubmit (e) {
    e.preventDefault()

    const {formData, myDropzone: {files}} = this.state

    const form = e.target

    this.setState({submitDisabled: true})

    let body

    if (!files.length) {
      body = encodeAsMultipart({
        'form-name': form.getAttribute('name'),
        ...formData
      })
    } else {
      body = encodeAsMultipart({
        'form-name': form.getAttribute('name'),
        ...formData,
        file: files[0]
      })
    }

    fetch('/', {
      method: 'POST',
      body: body,
    })
      .then(() => navigateTo(form.getAttribute('action')))
      .catch(error => {
        alert(error)
        this.setState({submitDisabled: false})
      })
  }

  render () {
    const {submitDisabled} = this.state

    return (
      <form
        className={`${s.form}`}
        action='/contact-us-success'
        method='POST'
        name='contact-us'
        data-netlify='true'
        data-netlify-honeypot='bot-field'
        onSubmit={this.handleSubmit}
      >
        {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
        <input type='hidden' name='form-name' value='contact-us'/>
        <p hidden>
          <label>
            Don’t fill this out:{' '}
            <input name='bot-field' onChange={this.handleChange}/>
          </label>
        </p>

        <FormattedMessage id='app.your_name'>
          {placeholder =>
            <input
              className={s.input}
              onChange={this.handleChange}
              type='text'
              name='name'
              placeholder={placeholder}
              required
            />
          }
        </FormattedMessage>

        <FormattedMessage id='app.your_email'>
          {placeholder =>
            <input
              className={s.input}
              onChange={this.handleChange}
              type='email'
              name='email'
              placeholder={placeholder}
              required
            />
          }
        </FormattedMessage>

        <FormattedMessage id='app.message'>
          {placeholder =>
            <textarea
              className={s.input}
              onChange={this.handleChange}
              rows='5'
              name='message'
              placeholder={placeholder}
              required
            />
          }
        </FormattedMessage>

        <input
          type='hidden'
          name='file'
        />

        <div id={`myDropzone`} className={`dropzone`}/>

        <button className={`button stretch uppercase`} type='submit' disabled={submitDisabled}>
          <FormattedMessage id='app.send'/>
        </button>
      </form>
    )
  }
}

export default ContactForm