DropZone - Nested property does not work

[middiu]

Version
^4.0.5

Mode
All

Describe the bug
Using DropZone, if the filed name is a nested field that application fails. For example:

{
    files1: {
       files2[]
    }
}

To Reproduce
use the code below:

import { Formik } from 'formik'
import { Form, DropZone } from 'react-formik-ui';

<Formik
  initialValues={{
    files1: {
       files2[]
    }
}}
  onSubmit={data => (alert(JSON.stringify(data)))}
>
  <Form>

    <DropZone
      name='files1.files2'
      label='File upload'
      placeholder='Try dropping some files here, or click to select files to upload.'
    />

  </Form>
</Formik>

Expected behavior
nested values should be set

Additional context
The issue is at src/lib/components/DropZone/DropZone.js line 29

react-formik-ui/src/lib/components/DropZone/DropZone.js

Line 29 in 8c2784f

const files = multiple ? values[name].concat(dropedFiles) : dropedFiles

const files = multiple ? values[name].concat(dropedFiles) : dropedFiles

if the name is "files1.files2" of course values["files1.files2"] return undefined.

Can you please fix this?

Thanks

[KaiHotz]

Actually files will always be just an array, if you need it to be a nested object you can capture that array in your submit function and convert the array into the object you need before submitting it

[middiu]

Sorry, maybe I was not clear.

What I mean is:

Formik Forms support natively complex objects and nested properties, please see the link below
https://jaredpalmer.com/formik/docs/guides/arrays

so let's say that I have an interrface like this:

{
name:string,
lastname:string, 
age:number, 
other:{
     documents: File[],  <--this is important!!!!
     DOB:Date,
      notes:string
     ...
     ...   
}
}

so now, I want to use DropZone to capture some files (1 or many) into the variable document:Files[], what I would normally do with any other field type is something like this (please again see the official Formik documentation here)

import React from 'react';
import { Formik, Form, Field } from 'formik';

export const NestedExample = () => (
  <div>
    <h1>Social Profiles</h1>
    <Formik
      initialValues={{
        social: {
          facebook: '',
          twitter: '',
        },
      }}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      <Form>
        <Field name="social.facebook" />  <--this is important!!!!
        <Field name="social.twitter" />  <--this is important!!!!
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

now the point is not if document is an array or not, but how to refernece it in the Formik component name.

Hope this clarify my issue.
the key part is <Field name="social.facebook" /> because facebook is a nested variable and using social.facebook I can easily reference it.

Using the same approach with DropZone I should be able to do this:

import { Formik } from 'formik'
import { Form, DropZone } from 'react-formik-ui';

<Formik
  initialValues={{
          name:string,
          lastname:string, 
          age:number, 
          other:{
               documents: File[], <--this is important!!!!
                DOB:Date,
               notes:string
               ...
              ...   
         }
}}
  onSubmit={data => (alert(JSON.stringify(data)))}
>
  <Form>

    <DropZone
      name='other.documents' <--this is important!!!!
      label='File upload'
      placeholder='Try dropping some files here, or click to select files to upload.'
    />

  </Form>
</Formik>

But as told in my first post this is not working and the problem is clear in the line:

const files = multiple ? values[name].concat(dropedFiles) : dropedFiles

the point is not if files is an array or not, the point is the values[name] always return undefined for nested object.

hope this clarify the issue.

[KaiHotz]

Ok, now I got what you meant, I’ll look into it but can’t promise that it will be fixed soon. You are always welcome to submit a fix via a PR