Document support for using with react-dropzone about react-s3-uploader HOT 10 OPEN

import Promise from 'bluebird';
import _ from 'lodash';
import klass from 'klass';
import Events from 'events';
import S3Upload from 'react-s3-uploader/s3upload.js';

const EventEmitter = Events.EventEmitter;


const S3FileUploader = klass({

    initialize(file, options) {
        this.file = file;
        this.preview = file.preview || URL.createObjectURL(file);
        this.emitter = new EventEmitter();
        this.opts = _.defaults(options || {}, {
            signingUrl: '/s3/signUpload'
        });
    },

    getFile() {
        return this.file;
    },

    getFileType() {
        return this.getFile().type;
    },

    getPreview() {
        return this.preview;
    },

    getFilename() {
        return this.getFile().name;
    },

    isImage() {
        return /^image\//.exec(this.getFileType());
    },

    getResultS3Filename() {
        return this.result && this.result.filename;
    },

    getPublicUrl() {
        return this.result && this.result.publicUrl;
    },

    on(event, callback) {
        this.emitter.addListener(event, callback);
    },

    off(event, callback) {
        this.emitter.removeListener(event, callback);
    },

    cancel() {
        if (this.upload) {
            this.upload.abortUpload();
            this.emitter.emit('abort');
            this.upload = null;
        }
    },

    markFailed() {
        this.failed = true;
    },

    isFailed() {
        return !!this.failed;
    },

    getContentDisposition() {
        let isPdf = this.getFileType() == 'application/pdf';
        return isPdf ? 'inline' : 'auto';
    },

    start() {
        return new Promise((resolve, reject) => {
            this.upload = new S3Upload({
                files: [this.file],
                signingUrl: this.opts.signingUrl,
                signingUrlQueryParams: this.opts.signingUrlQueryParams,
                contentDisposition: this.getContentDisposition(),
                onProgress: (percent, status) => {
                    this.emitter.emit('progress', percent, status);
                },
                onFinishS3Put: (result) => {
                    this.result = result;
                    this.emitter.emit('complete', result);
                    resolve(result);
                },
                onError: (status) => {
                    this.emitter.emit('error', status);
                    this.markFailed();
                    reject(status);
                }
            });
            this.emitter.once('abort', resolve);
        });
    }

});

export default S3FileUploader;

        onDrop(files) {
            let existingUploaders = this.state.uploaders;
            let existingUploadersByName = _.indexBy(existingUploaders, uploader => uploader.getFilename());

            let uploaders = _.map(files, (file) => {
                let filename = file.name;
                if (existingUploadersByName[filename] || !this.acceptsType(file.type)) {
                    return null;
                }

                let uploader = new S3FileUploader(file);

                uploader.on('progress', (percent) => {
                    this.setState({
                        [`progress-${filename}`]: {
                            percent: percent,
                            message: m('common.attachments.uploading')
                        }
                    });
                });

                uploader.on('complete', () => {
                    this.setState({
                        [`progress-${filename}`]: {
                            isComplete: true,
                            message: m('common.attachments.complete')
                        }
                    });
                });

                uploader.on('error', (status) => {
                    this.setState({
                        hasFailedUpload: true,
                        [`progress-${filename}`]: {
                            hidePercent: true,
                            message: status || m('common.attachments.error')
                        }
                    });
                });

                return uploader;
            });

            uploaders = _.compact(uploaders);

            if (!this.props.allowMultiple && uploaders.length) {
                _.each(existingUploaders, up => this.removeUpload(up));
                existingUploaders = [];
            }

            this.setState({
                uploaders: existingUploaders.concat(uploaders),
                uploading: true
            });

            return Promise.resolve()
                .then(() => {
                    return Promise.each(uploaders, uploader => uploader.start());
                })
                .finally(() => {
                    this.setState({ uploading: false });
                });
        },

    let uploader = new S3FileUploader(...);
    uploader.on('progress', this.updateProgressBar);
    uploader.start();

        getUploaderStatus(uploader) {
            let filename = uploader.getFilename();
            let progress = this.state[`progress-${filename}`];

            if (progress && progress.isComplete) {
                return (
                    <a className="upload-link" href={uploader.getPublicUrl()} target="_blank">
                        {filename}
                    </a>
                );
            }

            let progressMessage = progress ? progress.message : m('common.attachments.waiting');
            let progressPercent = progress && !progress.hidePercent ? progress.percent + '%' : '';
            return `${filename}: ${progressMessage} ${progressPercent}`;
        }