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

88 lines
2.3 KiB
React
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
2016-07-16 01:05:18 +02:00
import Dropzone from 'dropzone';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as UploaderActions from '../actions/uploader';
import getConfig from '../../../utils/getConfig';
import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
const s3Bucket = getConfig('S3_BUCKET_URL_BASE') ||
`https://s3-${getConfig('AWS_REGION')}.amazonaws.com/${getConfig('S3_BUCKET')}/`;
2016-07-16 01:05:18 +02:00
class FileUploader extends React.Component {
componentDidMount() {
2016-07-21 00:37:49 +02:00
this.createDropzone();
2016-07-16 02:01:21 +02:00
Dropzone.autoDiscover = false;
2016-07-21 00:37:49 +02:00
}
createDropzone() {
const userId = this.props.project.owner ? this.props.project.owner.id : this.props.user.id;
2016-07-16 02:01:21 +02:00
this.uploader = new Dropzone('div#uploader', {
2016-07-16 01:05:18 +02:00
url: s3Bucket,
method: 'post',
autoProcessQueue: true,
clickable: true,
maxFiles: 6,
parallelUploads: 2,
2016-10-28 22:19:56 +02:00
maxFilesize: 5, // in mb
maxThumbnailFilesize: 8, // 8 mb
thumbnailWidth: 200,
thumbnailHeight: 200,
acceptedFiles: fileExtensionsAndMimeTypes,
dictDefaultMessage: 'Drop files here or click to use the file browser',
accept: this.props.dropzoneAcceptCallback.bind(this, userId),
sending: this.props.dropzoneSendingCallback,
complete: this.props.dropzoneCompleteCallback
2016-10-25 03:15:32 +02:00
// error: (file, errorMessage) => {
// console.log(file);
// console.log(errorMessage);
// }
2016-07-16 02:01:21 +02:00
});
2016-07-16 01:05:18 +02:00
}
render() {
return (
<div id="uploader" className="uploader dropzone"></div>
);
}
}
FileUploader.propTypes = {
dropzoneAcceptCallback: PropTypes.func.isRequired,
dropzoneSendingCallback: PropTypes.func.isRequired,
dropzoneCompleteCallback: PropTypes.func.isRequired,
project: PropTypes.shape({
owner: PropTypes.shape({
id: PropTypes.string
})
}),
user: PropTypes.shape({
id: PropTypes.string
})
};
FileUploader.defaultProps = {
project: {
id: undefined,
owner: undefined
},
user: {
id: undefined
}
};
function mapStateToProps(state) {
return {
files: state.files,
project: state.project,
user: state.user
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(UploaderActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);