content: import React from 'react';
  import PropTypes from 'prop-types';
  import Dropzone from 'react-dropzone';
  import styles from './fieldStyles.css';
  import encodeDropzoneImages from '../utils/encodeDropzoneImages';
  
  const dropZone = ({ input, name, meta }) => {
    let file = input.value;
  
    return (
      <div>
  
        {file && (<img className={styles.previewImg} src={file} />)}
  
        {meta.touched && meta.error && ( <span className="error">{meta.error}</span> )}
  
        <Dropzone
          name={name}
          accept="image/jpeg"
          onDrop={(acceptedFiles) => {
            encodeDropzoneImages(acceptedFiles)
              .then((file) => input.onChange(file.imageSrc));    
          }}
          className={styles.dropzone}
          multiple={false}
        >
          <div className="btn btn-primary" >Select</div>
        </Dropzone>
  
      </div>
    );
  };
  
  dropZone.propTypes = {
    input: PropTypes.object,
    name: PropTypes.string,
    meta: PropTypes.shape({
      touched: PropTypes.bool,
      error: PropTypes.string
    })
  };
  
  export default dropZone;
  