p5.js-web-editor/client/modules/IDE/components/FileUploader.js

55 lines
1.6 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
2016-07-15 23:05:18 +00:00
import Dropzone from 'dropzone';
const s3Bucket = 'http://p5js-web-editor-test.s3.amazonaws.com/';
import * as UploaderActions from '../actions/uploader';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
2016-07-15 23:05:18 +00:00
class FileUploader extends React.Component {
componentDidMount() {
2016-07-16 00:01:21 +00:00
Dropzone.autoDiscover = false;
this.uploader = new Dropzone('div#uploader', {
2016-07-15 23:05:18 +00:00
url: s3Bucket,
method: 'post',
autoProcessQueue: true,
clickable: true,
maxFiles: 1,
parallelUploads: 1,
maxFilesize: 10, // in mb
maxThumbnailFilesize: 8, // 3MB
thumbnailWidth: 200,
thumbnailHeight: 200,
2016-07-15 23:05:18 +00:00
acceptedMimeTypes: 'image/bmp,image/gif,image/jpg,image/jpeg,image/png',
dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
accept: this.props.dropzoneAcceptCallback,
sending: this.props.dropzoneSendingCallback,
complete: this.props.dropzoneCompleteCallback
2016-07-16 00:01:21 +00:00
});
2016-07-15 23:05:18 +00:00
}
render() {
return (
<div id="uploader" className="uploader dropzone"></div>
);
}
}
FileUploader.propTypes = {
dropzoneAcceptCallback: PropTypes.func.isRequired,
dropzoneSendingCallback: PropTypes.func.isRequired,
dropzoneCompleteCallback: PropTypes.func.isRequired
};
function mapStateToProps(state) {
return {
files: state.files,
project: state.project
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(UploaderActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);