first cut pause

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -14,11 +14,11 @@ let FileDragAndDropPreviewImage = React.createClass({
 
     getInitialState() {
         return {
-            loading: false
+            paused: false
         };
     },
 
-    onClick(e) {
+    /*onClick(e) {
         e.preventDefault();
         e.stopPropagation();
         
@@ -27,6 +27,15 @@ let FileDragAndDropPreviewImage = React.createClass({
         });
 
         this.props.onClick(e);
+    },*/
+
+    toggleUploadProcess(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.setState({
+            paused: true
+        });
     },
 
     render() {
@@ -35,13 +44,14 @@ let FileDragAndDropPreviewImage = React.createClass({
             backgroundSize: 'cover'
         };
 
-        let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
+        //let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
+        let actionSymbol = this.state.paused ? <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/> : <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>
         return (
             <div
                 className="file-drag-and-drop-preview-image"
                 style={imageStyle}>
                     <ProgressBar completed={this.props.progress} color="black"/>
-                    {actionSymbol}
+                    
             </div>
         );
     }

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -30,14 +30,14 @@ let FileDragAndDropPreviewOther = React.createClass({
     },
 
     render() {
-        let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
+        //let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
         return (
             <div
                 className="file-drag-and-drop-preview">
                 <ProgressBar completed={this.props.progress} color="black"/>
                 <div className="file-drag-and-drop-preview-table-wrapper">
                     <div className="file-drag-and-drop-preview-other">
-                        {actionSymbol}
+                        <span className="glyphicon glyphicon-pause delete-file" aria-hidden="true" title="Delete or cancel upload"/>
                         <span>{'.' + this.props.type}</span>
                     </div>
                 </div>

js/components/ascribe_uploader/file_drag_and_drop_toolbar.js

@@ -1,13 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-let FileDragAndDropToolbar = React.createClass({
-    render() {
-        return (
-            <div></div>
-        );
-    }
-});
-
-export default FileDragAndDropToolbar;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -12,7 +12,6 @@ import { getCookie } from '../../utils/fetch_api_utils';
 
 import fineUploader from 'fineUploader';
 import FileDragAndDrop from './file_drag_and_drop';
-import FileDragAndDropToolbar from './file_drag_and_drop_toolbar';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
@@ -179,7 +178,6 @@ var ReactS3FineUploader = React.createClass({
                 onComplete: this.onComplete,
                 onCancel: this.onCancel,
                 onDelete: this.onDelete,
-                onSessionRequestComplete: this.onSessionRequestComplete,
                 onProgress: this.onProgress,
                 onRetry: this.onRetry,
                 onAutoRetry: this.onAutoRetry,
@@ -431,7 +429,6 @@ var ReactS3FineUploader = React.createClass({
                     handleCancelFile={this.handleCancelFile}
                     multiple={this.props.multiple}
                     dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
-                <FileDragAndDropToolbar />
             </div>
         );
     }

js/components/edition.js

@@ -36,6 +36,8 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 import apiUrls from '../constants/api_urls';
 import AppConstants from '../constants/application_constants';
 
+import { getCookie } from '../utils/fetch_api_utils';
+
 let Link = Router.Link;
 /**
  * This is the component that implements display-specific functionality
@@ -528,7 +530,10 @@ let FileUploader = React.createClass({
                 setUploadStatus={this.props.setUploadStatus}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                 session={{
-                    endpoint: '/api/ownership/loans/contract/'
+                    endpoint: AppConstants.serverUrl + 'api/ownership/loans/contract/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
                 }}/>
         );
     }

sass/ascribe_uploader.scss

@@ -70,7 +70,7 @@
     text-align: center;
 }
 
-.file-drag-and-drop-preview-image .delete-file {
+.file-drag-and-drop-preview-image .action-file {
     font-size: 2.5em;
     margin-top: .3em;
     color: white;
@@ -82,7 +82,7 @@
     }
 }
 
-.file-drag-and-drop-preview-other .delete-file {
+.file-drag-and-drop-preview-other .action-file {
     position: relative;
     top: .3em;
     margin-top: 0;