FileUploader.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import styles from './FileUploader.styl';
import FileIcon from '../../FileIcon/index';

import {
  uploadAttachments,
  removeAttachment,
} from '../../../actions/attachments.actions';

class FileUploaderInput extends Component {

  static propTypes = {
    style: PropTypes.object,
    label: PropTypes.string,
    multiple: PropTypes.bool,
    attachments: PropTypes.shape({ data: PropTypes.array }),
    uploadAttachments: PropTypes.func.isRequired,
    removeAttachment: PropTypes.func.isRequired,
    upload: PropTypes.func.isRequired,
    remove: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    files: PropTypes.array
  };

  static defaultProps = {
    multiple: true,
    style: {},
    label: '',
    attachments: { data: [] },
    files: []
  };

  componentWillReceiveProps(nextProps) {
    if (
      nextProps.attachments.data.length !== this.props.attachments.data.length
    ) {
      let e = { target: { value: nextProps.attachments.data } };
      this.props.onChange(e);
    }
  }

  openFileDialogHandler = e => {
    e.preventDefault();
    e.stopPropagation();
    this.droparea.open();
  };

  deleteFile = index => {
    /*  this.setState(
      prevState => ({
        files: [
          ...prevState.files.slice(0, index),
          ...prevState.files.slice(index + 1)],
      }),
      () => {
        this.props.removeAttachment(index);
      }); */
    this.props.removeAttachment(index);
    this.props.remove(index);
  };

  renderFiles({ data }) {
    return !!data.length && (
      <div
        role="presentation"
        className={styles.protocols}>
        {
          this.props.files.map(
            (file, key) => (
              <FileIcon
                key={key}
                content={file}
                delete={() => this.deleteFile(key)} />
            )
          )
        }
      </div>
    );
  }

  /*
  в этой функции если она записана в стреловидном и передана как коллбек в комопонент Dropzone виде this равен дропзоне
  если же переписать ее на нормальный метод и сделать передачу коллбека так: onDrop={this.handleDropFile.bind(this)}, то все 
  работает как надо
  */
  handleDropFile = files => {
    // this.setState({ files });
    console.log('handleDropFile', files);
    this.props.uploadAttachments(files);
    this.props.upload(files);
  }

  render() {
    const { multiple, attachments } = this.props;
    const { files } = this.props;
    return (
      <div className={styles.fileUploader}>
        <Dropzone
          className={styles.dropZone}
          multiple={multiple}
          ref={node => {
            this.droparea = node;
          }}
          onDrop={this.handleDropFile}>
          <p className={styles.dropText}>
            Перетащите файлы сюда или
            <button
              className={styles.dropBtn}
              onClick={this.openFileDialogHandler}>
              &nbsp;выберите на компьютере…
            </button>
          </p>
          {this.renderFiles(attachments, files)}
        </Dropzone>
        <p className={styles.dropBottom}>
          Не более 20 Мб, в формате DOC, PDF, JPG, PNG, GIF
        </p>
      </div>
    );
  }
}

const mapStateToProps = state =>
  ({ attachments: state.attachments });

const mapDispatchToProps = (dispatch, actions = {}) => {
  actions.uploadAttachments = uploadAttachments;
  actions.removeAttachment = removeAttachment;
  return bindActionCreators(actions, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps, null,
  { withRef: true })(FileUploaderInput);