JAVASCRIPT

using multiple dropzones with formik field array

import React from "react";
import { render } from "react-dom";
import { Formik, FieldArray, Field } from "formik";
import yup from "yup";
import Dropzone from "react-dropzone";

import Thumb from "./Thumb";

const dropzoneStyle = {
  width: "100%",
  height: "100px",
  borderWidth: 2,
  borderColor: "rgb(102, 102, 102)",
  borderStyle: "dashed",
  borderRadius: 5
};

const App = () => (
  <div className="container">
    <Formik
      initialValues={{
        files: [],
        friends: [
          {
            name: "joe",
            files: []
          }
        ]
      }}
      onSubmit={values => {
        alert(
          JSON.stringify(
            {
              files: values.files.map(file => ({
                fileName: file.name,
                type: file.type,
                size: `${file.size} bytes`
              }))
            },
            null,
            2
          )
        );
      }}
      validationSchema={yup.object().shape({
        recaptcha: yup.array()
      })}
      render={({ values, handleSubmit, setFieldValue }) => (
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Multiple files</label>
            <FieldArray
              name="friends"
              render={arrayHelpers => (
                <div>
                  {values.friends.map((friend, index) => (
                    <div key={index}>
                      <Field name={`friends[${index}].name`} />
                      <Field name={`friends.${index}.age`} />
                      {friend.files.map(f => (
                        <p>{f.name}</p>
                      ))}
                      <Dropzone
                        key={friend}
                        style={dropzoneStyle}
                        accept="image/*"
                        onDrop={acceptedFiles => {
                          // do nothing if no files
                          if (acceptedFiles.length === 0) {
                            return;
                          }

                          // on drop we add to the existing files
                          setFieldValue(
                            `friends.${index}.files`,
                            friend.files.concat(acceptedFiles)
                          );
                        }}
                      />
                      <button
                        type="button"
                        onClick={() => arrayHelpers.remove(index)}
                      >
                        -
                      </button>
                    </div>
                  ))}
                  <button
                    type="button"
                    onClick={() =>
                      arrayHelpers.push({ name: "", age: "", files: [] })
                    }
                  >
                    +
                  </button>
                </div>
              )}
            />
          </div>
          <button type="submit" className="btn btn-primary">
            submit
          </button>
        </form>
      )}
    />
  </div>
);

render(<App />, document.getElementById("root"));