title: initialize react dropzone with file
body: <p>I am using redux form for form related task. I am using <code>react-dropzone</code> for uploading files and redux form is used along with it. I could submit file to server but could not show that submitted file as <code>initialValues</code> for upload field.</p>
  
  <p>here is how i have done</p>
  
  <pre><code>const Form = ({ item }) =&gt; {
      return (
          &lt;&gt;
              &lt;form onSubmit={handleSubmit(val =&gt; handleItemSubmit(val, mutation))}&gt;
                  &lt;Field name="photo" component={UploadField} /&gt;
              &lt;/form&gt;
          &lt;/&gt;
      )
  }
  
  export default compose(
    connect((state, props) =&gt; {
      const { items } = props;
      return {
        initialValues: {
          ...items,
          photo:
            items &amp;&amp; items.photoPath
              ? { name: items.photoName, size: 12345 }
              : null,
          languages:
            items &amp;&amp;
            items.languages &amp;&amp;
            get(items, "languages", "")
              .split(",")
              .map(lang =&gt; ({
                label: lang,
                value: lang
              }))
        }
      };
    }),
    reduxForm({
      form: "item_form",
      enableReinitialize: true,
      fields: { ...requiredFields },
      validate
    })
  )(Form);
  
  
  
  import React from "react";
  import styled from "styled-components";
  import { useDropzone } from "react-dropzone";
  
  export const UploadField = props =&gt; {
    const {
      input: { onChange },
      disabled
    } = props;
  
    const { getRootProps, getInputProps } = useDropzone({
      onDrop: files =&gt; onChange(files)
    });
  
    const files = props.input.value;
  
    if (disabled) {
      return null;
    }
  
    return (
      &lt;&gt;
        &lt;DropzoneContainer {...getRootProps()}&gt;
          &lt;input {...getInputProps()} /&gt;
          Upload files here!
        &lt;/DropzoneContainer&gt;
        &lt;br /&gt;
        &lt;div&gt;
          {Object.keys(files).map((key, index) =&gt; {
            console.log("FILES ---", files);
            return (
              &lt;ThumbsContainer&gt;
                &lt;p&gt;{files[key].name}&lt;/p&gt;
              &lt;/ThumbsContainer&gt;
            );
          })}
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default UploadField;
  
  const DropzoneContainer = styled.div`
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      border-width: 2px;
      border-radius: 2px;
      border-color: ${props =&gt; getColor(props)};
      border-style: dashed;
      background-color: #fafafa;
      color: #bdbdbd;
      outline: none;
      transition: border 0.24s ease-in-out;
    `,
    ThumbsContainer = styled.aside`
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 16px;
    `,
    Thumb = styled.div`
      display: inline-flex;
      border-radius: 2px;
      border: solid 1px #eaeaea;
      margin-bottom: 8px;
      width: 100;
      height: 100;
      padding: 4px;
      box-sizing: border-box;
    `,
    ThumbInner = styled.div`
      display: flex;
      min-width: 0;
      overflow: hidden;
    `,
    Image = styled.img`
      display: block;
      max-width: 100%;
      width: 180px;
      height: 180px;
    `;
  
  const getColor = props =&gt; {
    if (props.isDragAccept) {
      return "#00e676";
    }
    if (props.isDragReject) {
      return "#ff1744";
    }
    if (props.isDragActive) {
      return "#2196f3";
    }
    return "#eeeeee";
  };
  </code></pre>
  
  <p>I get these two fields when uploading</p>
  
  <p><a href="https://i.stack.imgur.com/lTCAs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lTCAs.png" alt="enter image description here"></a></p>
  
  <p>other gets pre filled but not to upload field in my case.</p>