Netlify Formsでファイルを非同期アップロード with React + Formik + Axios

<!-- (中略) -->
  <!-- name：Formの名前NetlifyのおけるFormの識別子となる -->
  <!-- novalidate：Formikで入力チェックするためブラウザの入力チェックはオフ -->
  <!-- data-netlify：NetlifyでFormを認識させるための属性 -->
  <!-- netlify-honeypot：NetlifyでFormを認識させるための属性 -->
  <form
    method="POST"
    name="contact"    novalidate="true"    data-netlify="true"    netlify-honeypot="bot-field"  >    <input type="text" name="sampleText"/>
    <input type="file" name="sampleFile"/>
    
    <!-- 送信ボタン -->
    <button type="submit" >
      SUBMIT
    <button>
  </form>
<!-- (中略) -->

export default () =>  (
  <form
    name="contact" {/* Formの名前NetlifyのおけるFormの識別子となる */}
    method="POST"
    novalidate="true" {/* Formikで入力チェックするためブラウザの入力チェックはオフ */}
    data-netlify="true"  {/* NetlifyでFormを認識させるための属性 */}
    netlify-honeypot="bot-field" {/* NetlifyでFormを認識させるための属性 */}
  >
    {/* NetlifyFormで必要な値 */}    <input type="hidden" name="bot-field" />    {/* NetlifyFormで必要な値 */}    <input type="hidden" name="form-name" />    <input type="text" name="sampleText"/>
    <input type="file" name="sampleFile"/>
    
    {/* 送信ボタン */}
    <button type="submit" >
      SUBMIT
    <button>
  </form>
);

import React from 'react';
import { navigate } from "gatsby"
import { Formik, Field } from 'formik';
import ErrorMessage from './ErrorMessage';
import axios from "axios";
// フォームの値を初期化
/* (略) */

// 入力チェック
/* (略) */

// サブミット処理
const handleSubmit = (values, actions) => {  // FormData作成  const  params = new FormData();  params.append('form-name', values['form-name']);  // for Netlify Forms  params.append('bot-field', values['bot-field']);  // for Netlify Forms  params.append('sampleText', values['sampleText']);  params.append('sampleFile', values['sampleFile']);  // Formikの送信中フラグをオンにする  actions.setSubmitting(true);  // axiosで非同期にお問い合わせフォームを送信  axios({    method: "POST",    headers: { "Content-Type": "application/x-www-form-urlencoded" },    data: params,    url: "/"  }).then(res => {    // フォーム送信完了後    // 他画面に遷移（同期遷移ではなくSPAとしての遷移）    navigate('/application-complete');    // フォーム内容初期化    actions.resetForm();    // 最後にFormikの送信中フラグをオフにする    actions.setSubmitting(false);  }).catch(err => {    // なにかしらエラーハンドリング    actions.setSubmitting(false);    /* (中略) */
  });
}


// Form描画処理
const renderForm = ({
  handleSubmit,
  dirty,
  isSubmitting,
  setFieldValue,
}) => (
  <form
    name="contact" {/* Formの名前NetlifyのおけるFormの識別子となる */}
    method="POST"
    novalidate="true" {/* Formikで入力チェックするためブラウザの入力チェックはオフ */}
    data-netlify="true"  {/* NetlifyでFormを認識させるための属性 */}
    netlify-honeypot="bot-field" {/* NetlifyでFormを認識させるための属性 */}
    onSubmit={handleSubmit}
  >
    {/* (中略) */}
  </form>
);


// Form用Reactコンポーネント
export default () =>  (
  <Formik
    initialValues={initialValues}
    validate={handleValidate}
    render={renderForm}
    onSubmit={handleSubmit}
  />
);