Recursevly resolve files to base64 in javascript

app.js

import React, { Component } from "react";
import { Formik } from "formik";
import "./styles.css";

export default class App extends Component {
  state = {
    data: {
      name: "Test"
    }
  };

  readFileContent = async file => {
    return new Promise((resolve, reject) => {
      var fr = new FileReader();
      fr.onload = () => {
        resolve(fr.result);
      };
      fr.readAsText(file);
    });
  };

  resolveFiles = async data => {
    if (Array.isArray(data)) {
      const vals = data.map(async d => {
        return await this.resolveFiles(d);
      });
      return await Promise.all(vals);
    }
    if (data instanceof File) {
      const fileData = btoa(
        unescape(encodeURIComponent(await this.readFileContent(data)))
      );
      return {
        name: data.name,
        size: data.size,
        type: data.type,
        data: fileData
      };
    }

    if (typeof data === "object") {
      const vals = Object.keys(data).map(async key => {
        const val = await this.resolveFiles(data[key]);
        return [key, val];
      });
      const values = await Promise.all(vals);
      const res = {};
      values.forEach(([key, value]) => (res[key] = value));
      return res;
    }
    return data;
  };

  onSubmit = async (data, action) => {
    const resolvedData = await this.resolveFiles(data);
    console.log("data", data, "resolved", resolvedData);
  };

  onSelectFiles = (e, setFieldValue) => {
    const files = [...e.currentTarget.files];
    setFieldValue(e.currentTarget.name, files);
  };

  render() {
    const { data } = this.state;
    return (
      <Formik initialValues={data} onSubmit={this.onSubmit}>
        {({
          handleChange,
          handleBlur,
          handleSubmit,
          setFieldValue,
          values
        }) => (
          <form onSubmit={handleSubmit}>
            <div className="App">
              <div>
                <input
                  id="name"
                  name="name"
                  type="text"
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.name}
                />
              </div>
              <div>
                <input
                  id="files"
                  type="file"
                  multiple
                  name="files"
                  onChange={e => this.onSelectFiles(e, setFieldValue)}
                  onBlur={handleBlur}
                />
              </div>
              <button type="submit">Submit</button>
            </div>
          </form>
        )}
      </Formik>
    );
  }
}