Search
 
SCRIPT & CODE EXAMPLE
 

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"));
Comment

PREVIOUS NEXT
Code Example
Javascript :: Execercise for loop 
Javascript :: tempusdominus calendar out of background size 
Javascript :: metodos de arrays javascript 
Javascript :: how to validate image binary in node js 
Javascript :: buiding react project 
Javascript :: how to check my javascript code 
Javascript :: javascript interview questions and answers pdf 
Javascript :: how to create a new window with a specifc link jquery 
Javascript :: how to access property from inside an array 
Javascript :: p5.js sketch 
Javascript :: jquery datepicker validation 
Javascript :: mongoose.js clause where 
Javascript :: javascript folder array randomizer 
Javascript :: React Router rendering blank pages for all components 
Javascript :: How to escape specific JSON characters in Powershell 
Javascript :: Why is the return function in my debounce function never called? Angularjs 
Javascript :: AngularJS SPA edit button function 
Javascript :: Angularjs onchange datetime picker not working 
Javascript :: Can’t connect Express.js server to the Angular frontend 
Javascript :: how to edit data retrieval using jsp 
Javascript :: arrow function - one line and no parameters 
Javascript :: JOLT split flat object into key/value array 
Javascript :: boilerplate functional component for DataGrid 
Javascript :: mustache tutorial javascript 
Javascript :: Turn Module Into Non Module 
Javascript :: Setting Multiples Properties With Array 
Javascript :: open close menu javascript 
Javascript :: javascript reverse string short hand 
Javascript :: mdn javascript array 
Javascript :: nested object data 
ADD CONTENT
Topic
Content
Source link
Name
6+9 =