An example of making an AxiosRequestConfig object to do a multipart/form-data request

make-axios-request-config.ts

import axios, {
  AxiosRequestConfig,
  Method,
} from 'axios';


export const makeAxiosRequestConfig = (
  method: Method,
  path: string,
  data?: { [key: string]: any },
  params?: any
): AxiosRequestConfig => {
  let headers: AxiosRequestConfig['headers'] = {};
  let formData: FormData | undefined = undefined;

  if (data) {
    headers['Content-Type'] = 'multipart/form-data';
    formData = new FormData();
    Object.entries(data).forEach(([key, val]) => {
      // HACK - make type happy…
      const hackVal = val as string | File;
      formData.append(key, hackVal);
    });
  }

  return {
    method,
    url: `${ENDPOINT}${path}`,
    data: formData,
    params,
    headers,
  };
};

This handles both regular and form data, so you can send files to your server. You would use it like…

const cfg = makeAxiosRequestConfig('PATCH', '/api/foo', myFormData);
cons resp = await axios(cfg);