diff --git a/.eslintignore b/.eslintignore index 25c2038b..6a87a8a8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,5 @@ node_modules js/**/__tests__ -server.js \ No newline at end of file +server.js +js/components/ascribe_uploader/vendor \ No newline at end of file diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js index 0d57bb1c..a4d1781b 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop.js +++ b/js/components/ascribe_uploader/file_drag_and_drop.js @@ -81,8 +81,8 @@ var FileDragAndDrop = React.createClass({ handleOnClick() { // Simulate click on hidden file input - var event = document.createEvent("HTMLEvents"); - event.initEvent("click", false, true); + var event = document.createEvent('HTMLEvents'); + event.initEvent('click', false, true); this.refs.fileinput.getDOMNode().dispatchEvent(event); }, @@ -101,17 +101,17 @@ var FileDragAndDrop = React.createClass({ onDrop={this.handleDrop} onDragEnd={this.handleDragEnd}> {hasFiles ? null : Click or drag to add files} - diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 1011d763..4302b1ca 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -12,24 +12,15 @@ import FileDragAndDrop from './file_drag_and_drop'; var ReactS3FineUploader = React.createClass({ - getInitialState() { - return { - filesToUpload: [], - uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()) - }; - }, - - componentDidMount() { - //console.log(JSON.stringify(this.propsToConfig())); - //let file = this.state.uploader.getResumableFilesData()[0]; - //this.state.uploader.retry('1RKieODp_EBoDPNhISXBDNuA1JKdVuXCWhyk44DTK81WUQvpu3M8TXsKPLkjm3ICSvbbyR2KaHhEysvRQ_s4qHNFCbBiYrZ0Q8clXGCYtzk-'); - }, - propTypes: { keyRoutine: React.PropTypes.shape({ url: React.PropTypes.string, fileClass: React.PropTypes.string }), + createBlobRoutine: React.PropTypes.shape({ + url: React.PropTypes.string + }), + handleChange: React.PropTypes.func, autoUpload: React.PropTypes.bool, debug: React.PropTypes.bool, objectProperties: React.PropTypes.shape({ @@ -84,9 +75,16 @@ var ReactS3FineUploader = React.createClass({ }) }, + getInitialState() { + return { + filesToUpload: [], + uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()) + }; + }, + propsToConfig() { let objectProperties = this.props.objectProperties; - objectProperties['key'] = this.requestKey; + objectProperties.key = this.requestKey; return { autoUpload: this.props.autoUpload, @@ -109,7 +107,7 @@ var ReactS3FineUploader = React.createClass({ onSubmit: this.onSubmit, onComplete: this.onComplete, onDelete: this.onDelete, - onSessionRequestComplete: this.onSessionRequestComplete, + onSessionRequestComplete: this.onSessionRequestComplete, onProgress: this.onProgress, onRetry: this.onRetry, onAutoRetry: this.onAutoRetry, @@ -118,6 +116,7 @@ var ReactS3FineUploader = React.createClass({ } }; }, + getCookie(name) { console.log(document.cookie); let value = '; ' + document.cookie; @@ -160,8 +159,45 @@ var ReactS3FineUploader = React.createClass({ console.log('submit'); }, - onComplete() { - console.log('complete'); + onComplete(id) { + let files = this.state.filesToUpload; + files[id].status = 'upload successful'; + files[id].key = this.state.uploader.getKey(id); + + let newState = React.addons.update(this.state, { + filesToUpload: { $set: files } + }); + this.setState(newState); + this.createBlob(files[id]); + this.props.handleChange(); + console.log('completed ' + files[id].name); + }, + + createBlob(file) { + let defer = new fineUploader.Promise(); + fetch(this.props.createBlobRoutine.url, { + method: 'post', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + 'X-CSRFToken': this.getCookie('csrftoken') + }, + credentials: 'include', + body: JSON.stringify({ + 'filename': file.name, + 'key': file.key + }) + }) + .then((res) => { + return res.json(); + }) + .then((res) =>{ + defer.success(res.key); + }) + .catch((err) => { + console.error(err); + }); + return defer; }, onRetry() { @@ -193,13 +229,14 @@ var ReactS3FineUploader = React.createClass({ // also, sync files from state with the ones from fineuploader let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload)); // splice because I can - filesToUpload.splice(fileId, 1); + filesToUpload.splice(id, 1); // set state this.setState({ filesToUpload: React.addons.update(this.state.filesToUpload, {$set: filesToUpload}) }); } else { + console.log(id); // TODO: add global notification } }, @@ -207,7 +244,7 @@ var ReactS3FineUploader = React.createClass({ onProgress(id, name, uploadedBytes, totalBytes) { var newState = React.addons.update(this.state, { filesToUpload: { [id]: { - progress: { $set: (uploadedBytes/totalBytes)*100} } + progress: { $set: (uploadedBytes / totalBytes) * 100} } } }); this.setState(newState); @@ -216,7 +253,7 @@ var ReactS3FineUploader = React.createClass({ handleDeleteFile(fileId) { // delete file from server this.state.uploader.deleteFile(fileId); - // this is being continues in onDeleteFile, as + // this is being continues in onDeleteFile, as // fineuploaders deleteFile does not return a correct callback or // promise }, @@ -241,7 +278,7 @@ var ReactS3FineUploader = React.createClass({ for(let i = 0; i < oldAndNewFiles.length; i++) { for(let j = 0; j < oldFiles.length; j++) { if(oldAndNewFiles[i].originalName === oldFiles[j].name) { - oldAndNewFiles[i].progress = 0; + oldAndNewFiles[i].progress = oldFiles[j].progress; oldAndNewFiles[i].type = oldFiles[j].type; oldAndNewFiles[i].url = oldFiles[j].url; } @@ -256,7 +293,7 @@ var ReactS3FineUploader = React.createClass({ render() { return ( - diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 99872717..384f0d23 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -20,16 +20,94 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader'; import DatePicker from 'react-datepicker/dist/react-datepicker'; let RegisterPiece = React.createClass( { - render() { + mixins: [Router.Navigation], + getInitialState(){ + return {digital_work_key: null}; + }, + handleSuccess(){ + let notification = new GlobalNotificationModel('Login successsful', 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + this.transitionTo('pieces'); + }, + + getFormData(){ + let data = {}; + for (let ref in this.refs.form.refs){ + data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value; + } + data.digital_work_key = this.state.digital_work_key; + return data; + }, + handleChange(){ + this.setState({digital_work_key: this.refs.uploader.refs.fineuploader.state.filesToUpload[0].key}) + }, + + render() { + let buttons = null; + if (this.refs.uploader && this.refs.uploader.refs.fineuploader.state.filesToUpload[0].status === 'upload successful'){ + buttons = ( + ); + } return (
-
- +
+
-
- +
+

Lock down title

+
+ + + }> + + + + + + + + + + + + +
+
); @@ -39,13 +117,17 @@ let RegisterPiece = React.createClass( { let FileUploader = React.createClass( { render() { - return ( + multiple={false}/> ); } }); -let RegisterPieceForm = React.createClass({ - mixins: [Router.Navigation], - - - handleSuccess(){ - let notification = new GlobalNotificationModel('Login successsful', 'success', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - this.transitionTo('pieces'); - - }, - render() { - return ( -
- Register your artwork - } - spinner={ - - }> - - - - - - - - - - - - -
-
- ); - } -}); let InputDate = React.createClass({ propTypes: { @@ -179,6 +201,11 @@ let InputDate = React.createClass({ this.setState({ value: date, value_formatted: date.format('YYYY')}); + let event = document.createEvent('HTMLEvents'); + event.initEvent('click', false, true); + document.dispatchEvent(event); + event.target.value = date; + this.props.onChange(event); }, render: function () { diff --git a/js/components/settings_container.js b/js/components/settings_container.js index 3d4134a6..09be1d05 100644 --- a/js/components/settings_container.js +++ b/js/components/settings_container.js @@ -202,7 +202,7 @@ let APISettings = React.createClass({ }, render() { let content = ; - if (this.state.applications.length > 0) { + if (this.state.applications.length > -1) { content = this.state.applications.map(function(app) { return ( '; @import 'ascribe_piece_register'; @import 'offset_right'; @import 'ascribe_settings'; -@import '../node_modules/react-s3-fineuploader/scss/ascribe-theme'; body { background-color: #FDFDFD;