React和Dropzone.js:以“插入模式”上传图像

我有一个表单来添加用户和外部的上传字段(dropzone.js)来管理用户的头像图像。

如果表单处于编辑模式，我知道用户的id，这样我就可以管理头像;但是如果我想添加一个用户，我没有id来绑定一个图像到新用户。

实际上，我在插入模式中使用这种方法:

1. 我将图片上传到服务器;
2. 服务器返回文件名;
3. 当提交按钮被按下以保存用户时，我在post请求中添加文件名。

其他解决方案可以是:

1. 创建一个预览和计算图像的base64与dropzone并将其发送到服务器(但我不知道如何实现这个解决方案);
2. 在插入模式下禁用上传字段，只在编辑模式下启用模式。

有更好的解决方案吗?

编辑1:这是我的代码

var ModalAvatar = React.createClass({
    propTypes: {
        isActive        : React.PropTypes.bool.isRequired,
        onChange        : React.PropTypes.func.isRequired
    },
    componentDidMount: function() {
        var self = this;
        Dropzone.autoDiscover = false;
        this.dropzone = new Dropzone('#demo-upload', {
            parallelUploads: 1,
            thumbnailHeight: 120,
            thumbnailWidth: 120,
            maxFilesize: 3,
            filesizeBase: 1000,
        });
        this.dropzone.on("addedfile", function(file){
            // How I could read the added file by $_FILES?
            var url = URL.createObjectURL(file);
            var formData = new FormData();
            formData.append("avatarFile", file);
            self.props.onChange("avatarFile", formData);
        });
        // Now fake the file upload (I took this from dropzone.js)
        var minSteps = 6,
            maxSteps = 60,
            timeBetweenSteps = 100,
            bytesPerStep = 100000;
        this.dropzone.uploadFiles = function(files) {
            var self = this;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
                for (var step = 0; step < totalSteps; step++) {
                    var duration = timeBetweenSteps * (step + 1);
                    setTimeout(function(file, totalSteps, step) {
                        return function() {
                            file.upload = {
                                progress: 100 * (step + 1) / totalSteps,
                                total: file.size,
                                bytesSent: (step + 1) * file.size / totalSteps
                            };
                            self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
                            if (file.upload.progress == 100) {
                                file.status = Dropzone.SUCCESS;
                                self.emit("success", file, 'success', null);
                                self.emit("complete", file);
                                self.processQueue();
                            }
                        };
                    }(file, totalSteps, step), duration);
                }
            }
        }


        this.toggle(this.props.isActive);
    },

    render: function(){
        return (
            <form action="/upload" className="dropzone needsclick dz-clickable" id="demo-upload">
                <div className="dz-message needsclick">
                    Drop files here or click to upload.
                </div>
            </form>
        )
    }
});

var User = React.createClass({
    getInitialState: function(){        
        return {
            isActive : false
        }
    }, 
    onChange: function(formData){
        this.setState({
            avatarImg: formData
        });
    },
    openModal: function(){
         this.setState({
             isActive: true
         });
    },
    render: function(){
        var model = {
            id              : this.state.id,
            avatarImg       : this.state.avatarImg
        };

        return (
            <div className="user">
                 <div className="user-avatar" onClick={this.openModal}><img src="path"></div>
                    <Form model={model} onSuccess={this.onSuccess}>
                        <FieldName value={name}  />
                        <FieldEmail value={email} />
                    </Form>
                    <ModalAvatar 
                         isActive={this.state.isActive} 
                         onChange={this.onChange} />
            </div>
        )
    }
});

在User组件中，我有一个表单来添加姓名，电子邮件等，另一个div .user-avatar来显示用户的头像和打开模式来更改它。

我的想法是模拟在dropzone中上传，并使用"addedfile"事件转换file参数，我可以在php中使用$_FILES读取，但该代码$_FILES为空。我错了吗?