() => {

  const user = {

    avatar: null,

  }

  const onSubmit = (values, actions) => {

    setTimeout(() => {

      console.log(values)

      actions.setSubmitting(false)

    }, 1000)

  }

​

  const onValidate = values => {

    const errors = {}

​

    if (values.avatar && values.avatar.length) {

      if (values.avatar[0].size > 100000) {

        errors.avatar = 'Please choose a photo under 100kb.'

      }

    }

​

    return errors

  }

​

  return (

    <Formik initialValues={user} validate={onValidate} onSubmit={onSubmit}>

      {({ values, errors, touched, handleSubmit, isSubmitting }) => (

        <Form onSubmit={handleSubmit}>

          {/* avatar */}

​

          <FormControl

            success={touched.avatar && !errors.avatar ? true : false}

            error={touched.avatar && errors.avatar ? true : false}

          >

            <FormControlLabel>Upload an avatar:</FormControlLabel>

            <Field component={FileUploader} name="avatar" accept="image/*" />

            <FormHelperText>

              {(touched.avatar && errors.avatar) || null}

            </FormHelperText>

          </FormControl>

          <FormControl>

            <Button type="submit" disabled={isSubmitting}>

              {isSubmitting ? 'Submitting.......' : 'Submit'}

            </Button>

          </FormControl>

          <pre>{JSON.stringify(values, null, 2)}</pre>

        </Form>

      )}

    </Formik>

  )

}