fix csrf bug with fineuploaders props

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -44,7 +44,7 @@ var ReactS3FineUploader = React.createClass({
         }),
         signature: React.PropTypes.shape({
             endpoint: React.PropTypes.string
-        }),
+        }).isRequired,
         uploadSuccess: React.PropTypes.shape({
             method: React.PropTypes.string,
             endpoint: React.PropTypes.string,
@@ -67,7 +67,7 @@ var ReactS3FineUploader = React.createClass({
             method: React.PropTypes.string,
             endpoint: React.PropTypes.string,
             customHeaders: React.PropTypes.object
-        }),
+        }).isRequired,
         session: React.PropTypes.shape({
             endpoint: React.PropTypes.bool
         }),
@@ -106,20 +106,6 @@ var ReactS3FineUploader = React.createClass({
                     isBrowserPreviewCapable: fineUploader.supportedFeatures.imagePreviews
                 }
             },
-            signature: {
-                endpoint: AppConstants.serverUrl + 's3/signature/',
-                customHeaders: {
-                   'X-CSRFToken': getCookie('csrftoken')
-                }
-            },
-            deleteFile: {
-                enabled: true,
-                method: 'DELETE',
-                endpoint: AppConstants.serverUrl + 's3/delete',
-                customHeaders: {
-                   'X-CSRFToken': getCookie('csrftoken')
-                }
-            },
             cors: {
                 expected: true,
                 sendCredentials: true
@@ -152,10 +138,24 @@ var ReactS3FineUploader = React.createClass({
     getInitialState() {
         return {
             filesToUpload: [],
-            uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
+            uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
+            csrfToken: getCookie('csrftoken')
         };
     },
 
+    // since the csrf header is defined in this component's props,
+    // everytime the csrf cookie is changed we'll need to reinitalize 
+    // fineuploader and update the actual csrf token
+    componentWillUpdate(nextProps, nextState) {
+        let potentiallyNewCSRFToken = getCookie('csrftoken');
+        if(this.state.csrfToken !== potentiallyNewCSRFToken) {
+            this.setState({
+                uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
+                csrfToken: potentiallyNewCSRFToken
+            });
+        }
+    },
+
     propsToConfig() {
         let objectProperties = this.props.objectProperties;
         objectProperties.key = this.requestKey;
@@ -192,13 +192,6 @@ var ReactS3FineUploader = React.createClass({
         };
     },
 
-    getCookie(name) {
-        let value = '; ' + document.cookie;
-        let parts = value.split('; ' + name + '=');
-        if (parts.length === 2) {
-            return parts.pop().split(';').shift();
-        }
-    },
     requestKey(fileId) {
         let filename = this.state.uploader.getName(fileId);
         return new Promise((resolve, reject) => {
@@ -207,7 +200,7 @@ var ReactS3FineUploader = React.createClass({
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json',
-                    'X-CSRFToken': this.getCookie('csrftoken')
+                    'X-CSRFToken': getCookie('csrftoken')
                 },
                 credentials: 'include',
                 body: JSON.stringify({
@@ -264,7 +257,7 @@ var ReactS3FineUploader = React.createClass({
             headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
-                'X-CSRFToken': this.getCookie('csrftoken')
+                'X-CSRFToken': getCookie('csrftoken')
             },
             credentials: 'include',
             body: JSON.stringify({

js/components/edition.js

@@ -557,6 +557,20 @@ let FileUploader = React.createClass({
                                 'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
                             }
                         }}
+                        signature={{
+                            endpoint: AppConstants.serverUrl + 's3/signature/',
+                            customHeaders: {
+                               'X-CSRFToken': getCookie('csrftoken')
+                            }
+                        }}
+                        deleteFile={{
+                            enabled: true,
+                            method: 'DELETE',
+                            endpoint: AppConstants.serverUrl + 's3/delete',
+                            customHeaders: {
+                               'X-CSRFToken': getCookie('csrftoken')
+                            }
+                        }}
                         areAssetsDownloadable={true}
                         areAssetsEditable={this.props.editable}/>
                 </Property>

js/components/register_piece.js

@@ -30,6 +30,7 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
 import DatePicker from 'react-datepicker/dist/react-datepicker';
 
 import { mergeOptions } from '../utils/general_utils';
+import { getCookie } from '../utils/fetch_api_utils';
 
 let RegisterPiece = React.createClass( {
     mixins: [Router.Navigation],
@@ -66,7 +67,7 @@ let RegisterPiece = React.createClass( {
         // once the currentUser object from UserStore is defined (eventually the user was transitioned
         // to the login form via the slider and successfully logged in), we can direct him back to the
         // register_piece slide
-        if(state.currentUser && state.currentUser.email) {
+        if(state.currentUser && state.currentUser.email || this.state.currentUser && this.state.currentUser.email) {
             this.refs.slidesContainer.setSlideNum(0);
             // we should also make the fineuploader component editable again
             this.setState({
@@ -158,8 +159,8 @@ let RegisterPiece = React.createClass( {
     render() {
         return (
             <SlidesContainer ref="slidesContainer">
-                <div 
+                <div
-                    onClick={this.changeSlide} 
+                    onClick={this.changeSlide}
                     onFocus={this.changeSlide}>
                     <h3 style={{'marginTop': 0}} onClick={this.changePage}>Lock down title</h3>
                     <Form
@@ -266,7 +267,21 @@ let FileUploader = React.createClass({
                 setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                 areAssetsDownloadable={false}
-                areAssetsEditable={this.props.editable}/>
+                areAssetsEditable={this.props.editable}
+                signature={{
+                    endpoint: AppConstants.serverUrl + 's3/signature/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
+                }}
+                deleteFile={{
+                    enabled: true,
+                    method: 'DELETE',
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
+                }}/>
         );
     }
 });