initialize react dropzone with file

I am using redux form for form related task. I am using react-dropzone 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 initialValues for upload field.

here is how i have done

const Form = ({ item }) => {
    return (
        <>
            <form onSubmit={handleSubmit(val => handleItemSubmit(val, mutation))}>
                <Field name="photo" component={UploadField} />
            </form>
        </>
    )
}

export default compose(
  connect((state, props) => {
    const { items } = props;
    return {
      initialValues: {
        ...items,
        photo:
          items && items.photoPath
            ? { name: items.photoName, size: 12345 }
            : null,
        languages:
          items &&
          items.languages &&
          get(items, "languages", "")
            .split(",")
            .map(lang => ({
              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 => {
  const {
    input: { onChange },
    disabled
  } = props;

  const { getRootProps, getInputProps } = useDropzone({
    onDrop: files => onChange(files)
  });

  const files = props.input.value;

  if (disabled) {
    return null;
  }

  return (
    <>
      <DropzoneContainer {...getRootProps()}>
        <input {...getInputProps()} />
        Upload files here!
      </DropzoneContainer>
      <br />
      <div>
        {Object.keys(files).map((key, index) => {
          console.log("FILES ---", files);
          return (
            <ThumbsContainer>
              <p>{files[key].name}</p>
            </ThumbsContainer>
          );
        })}
      </div>
    </>
  );
};

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 => 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 => {
  if (props.isDragAccept) {
    return "#00e676";
  }
  if (props.isDragReject) {
    return "#ff1744";
  }
  if (props.isDragActive) {
    return "#2196f3";
  }
  return "#eeeeee";
};

I get these two fields back from server when uploading images.

[danielprettcampagna-ipiranga]

Shouldn’t this issue be reopened?

[SanskarSans]

what kind of file has to be passed? Can you show me an example, please?