removedfile handler triggered when componentWillUnmount about react-dropzone-component HOT 3 CLOSED

    componentWillUnmount() {
        console.log('componentWillUnmount dropzone  out', dropzone);
        dropzone = null;
    }

removedfile: (fileObj) => {
        if (!dropzone) {
            console.log('dzRemovedFile dropzone  out', dropzone);
            return;
        }
        console.log('dzRemovedFile', fileObj, dzConfig.params.uploadTimestamp);
        if (fileObj.status === 'success') {
            $.ajax({
                url: '/upload',
...

import React from 'react';
import _ from 'lodash';

import DropzoneComponent from 'react-dropzone-component';
// https://www.npmjs.com/package/react-dropzone-component

import growl from '../UI/growl';

var dropzone;

var dzComponentConfig = {
    allowedFiletypes: [
        '.doc', '.jpg', '.mp3', '.pdf', '.txt'
    ],
    showFiletypeIcon: true,
    postUrl: '/upload'
};

var dzConfig = {
    autoProcessQueue: true,
    addRemoveLinks: true,
    uploadMultiple: true,
    maxFileSize: 10,
    maxFiles: 10,
    params: {
        uploadTimestamp: ''
    },
    accept: (file, done) => {
        var doneMessage = null;
        _.find(dropzone.files, (value, key) => {
            if (value.name === file.name && _.contains([
                'success', 'queued'
            ], value.status)) {
                doneMessage = 'Duplicated file, it won\'t be imported';
                growl(doneMessage, {
                    type: 'danger'
                });
                return true;
            }
        });
        done(doneMessage);
    }
};

var dzEventHandlers = {

    // Init callback to retrieve Dropzone instance
    init: (DzObject) => {
        dropzone = DzObject;
        // console.log('dzInit', DzObject);
    },
    // All of these receive the event as first parameter:
    drop: null,
    dragstart: null,
    dragend: null,
    dragenter: null,
    dragover: null,
    dragleave: null,
    // All of these receive the file as first parameter:
    addedfile: null,
    removedfile: (fileObj) => {
        console.log('dzRemovedFile', fileObj, dzConfig.params.uploadTimestamp);
        if (fileObj.status === 'success') {
            $.ajax({
                url: '/upload',
                dataType: 'json',
                type: 'DELETE',
                data: {
                    fileName: fileObj.name,
                    uploadTimestamp: dzConfig.params.uploadTimestamp
                },
                success: (data) => {
                    // console.log('dzRemovedFile', 'success', data);
                },
                error: (xhr, status, err) => {
                    // console.error('dzRemovedFile', status, err.toString());
                }
            });
        }
    },
    thumbnail: null,
    error: null,
    processing: null,
    uploadprogress: null,
    sending: null,
    success: null,
    complete: null,
    canceled: null,
    maxfilesreached: null,
    maxfilesexceeded: null,
    // All of these receive a list of files as first parameter
    // and are only called if the uploadMultiple option
    // in djsConfig is true:
    processingmultiple: null,
    sendingmultiple: null,
    successmultiple: null,
    completemultiple: null,
    canceledmultiple: null,
    // Special Events
    totaluploadprogress: null,
    reset: null,
    queuecompleted: null
};

export default class InputDropzone extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            className: '',
            errorMessage: '',
            isValid: false
        };
    }

    componentWillMount() {
        dzConfig.params.uploadTimestamp = this.props.inputParams.uploadTimestamp;
        dzComponentConfig.postUrl = '/upload?uploadTimestamp=' + this.props.inputParams.uploadTimestamp;
        // console.log('componentWillMount',  this.props.inputParams.uploadTimestamp, dzComponentConfig);
    }

    render() {
        return (
            <div className={'form-group ' + this.state.className}>
                <label className='control-label' htmlFor={this.props.name.toLowerCase()}>{this.props.label}</label>
                <span className='text-warning pull-right'>{this.state.errorMessage}</span>
                <DropzoneComponent
                    config={dzComponentConfig}
                    djsConfig={dzConfig}
                    eventHandlers={dzEventHandlers}
                    name={this.props.name.toLowerCase()}
                    {...this.props}
                />
            </div>
        )
    }
};

InputDropzone.propTypes = {
    label: React.PropTypes.string,
    name: React.PropTypes.string,
    placeholder: React.PropTypes.string
};

InputDropzone.defaultProps = {
    label: '',
    name: '',
    placeholder: ''
};