2016-07-19 20:49:46 +00:00
|
|
|
import React, { PropTypes } from 'react';
|
2016-07-15 23:05:18 +00:00
|
|
|
import Dropzone from 'dropzone';
|
2016-09-09 02:15:29 +00:00
|
|
|
const s3Bucket = `https://s3-us-west-2.amazonaws.com/${process.env.S3_BUCKET}/`;
|
2016-07-19 20:49:46 +00:00
|
|
|
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-20 22:37:49 +00:00
|
|
|
this.createDropzone();
|
2016-07-16 00:01:21 +00:00
|
|
|
Dropzone.autoDiscover = false;
|
2016-07-20 22:37:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
createDropzone() {
|
2016-07-16 00:01:21 +00:00
|
|
|
this.uploader = new Dropzone('div#uploader', {
|
2016-07-15 23:05:18 +00:00
|
|
|
url: s3Bucket,
|
|
|
|
method: 'post',
|
|
|
|
autoProcessQueue: true,
|
|
|
|
clickable: true,
|
2016-11-30 00:18:11 +00:00
|
|
|
maxFiles: 6,
|
|
|
|
parallelUploads: 2,
|
2016-10-28 20:19:56 +00:00
|
|
|
maxFilesize: 5, // in mb
|
2016-11-30 00:18:11 +00:00
|
|
|
maxThumbnailFilesize: 8, // 8 mb
|
2016-07-20 01:42:33 +00:00
|
|
|
thumbnailWidth: 200,
|
|
|
|
thumbnailHeight: 200,
|
2016-08-25 04:18:28 +00:00
|
|
|
// TODO what is a good list of MIME types????
|
2016-10-24 22:25:57 +00:00
|
|
|
acceptedFiles: `image/*,audio/*,text/javascript,text/html,text/css,
|
|
|
|
application/json,application/x-font-ttf,application/x-font-truetype,
|
2016-11-02 15:42:59 +00:00
|
|
|
text/plain,text/csv,.obj,video/webm,video/ogg,video/quicktime,video/mp4,
|
|
|
|
.otf,.ttf`,
|
2016-07-20 01:42:33 +00:00
|
|
|
dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
|
2016-07-19 20:49:46 +00:00
|
|
|
accept: this.props.dropzoneAcceptCallback,
|
|
|
|
sending: this.props.dropzoneSendingCallback,
|
2016-08-25 16:39:36 +00:00
|
|
|
complete: this.props.dropzoneCompleteCallback,
|
2016-10-25 01:15:32 +00:00
|
|
|
// error: (file, errorMessage) => {
|
|
|
|
// console.log(file);
|
|
|
|
// console.log(errorMessage);
|
|
|
|
// }
|
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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-07-19 20:49:46 +00:00
|
|
|
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);
|