implement hashing toggle

js/components/ascribe_slides_container/slides_container.js

@@ -34,7 +34,12 @@ let SlidesContainer = React.createClass({
         // check if slide_num was defined, and if not then default to 0
         let queryParams = this.getQuery();
         if(!('slide_num' in queryParams)) {
-            this.replaceWith(this.getPathname(), null, {slide_num: 0});
+
+            // we're first requiring all the other possible queryParams and then set
+            // the specific one we need instead of overwriting them
+            queryParams.slide_num = 0;
+
+            this.replaceWith(this.getPathname(), null, queryParams);
         }
 
         // init container width
@@ -60,7 +65,12 @@ let SlidesContainer = React.createClass({
     setSlideNum(slideNum) {
         if(slideNum < 0 || slideNum < React.Children.count(this.props.children)) {
 
-            this.replaceWith(this.getPathname(), null, {slide_num: slideNum});
+            // we're first requiring all the other possible queryParams in order to not
+            // delete some of them that might be needed by other components
+            let queryParams = this.getQuery();
+            queryParams.slide_num = slideNum;
+
+            this.replaceWith(this.getPathname(), null, queryParams);
             this.setState({
                 slideNum: slideNum
             });

js/components/ascribe_uploader/file_drag_and_drop_dialog.js

@@ -1,9 +1,14 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
+
+import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
 
 import { getLangText } from '../../utils/lang_utils';
 
+let Link = Router.Link;
+
 let FileDragAndDropDialog = React.createClass({
     propTypes: {
         hasFiles: React.PropTypes.bool,
@@ -12,30 +17,66 @@ let FileDragAndDropDialog = React.createClass({
         localHashing: React.PropTypes.bool
     },
 
+    mixins: [Router.State],
+
     render() {
+        const queryParams = this.getQuery();
+
         if(this.props.hasFiles) {
             return null;
         } else {
-            if(this.props.multipleFiles) {
+            if(!queryParams.method) {
+
+                let queryParamsHash = Object.assign({}, queryParams);
+                queryParamsHash.method = 'hash';
+
+                let queryParamsUpload = Object.assign({}, queryParams);
+                queryParamsUpload.method = 'upload';
+
                 return (
-                    <span className="file-drag-and-drop-dialog">
-                        {getLangText('Click or drag to add files')}
+                    <span className="file-drag-and-drop-dialog present-options">
+                        <p>{getLangText('Would you rather')}</p>
+                        <Link
+                            to={this.getPath()}
+                            query={queryParamsHash}>
+                            <span className="btn btn-default btn-sm">
+                                {getLangText('Hash your work')}
+                            </span>
+                        </Link>
+
+                        <span> or </span>
+                       
+                       <Link
+                            to={this.getPath()}
+                            query={queryParamsUpload}>
+                            <span className="btn btn-default btn-sm">
+                                {getLangText('Upload and hash your work')}
+                            </span>
+                        </Link>
                     </span>
                 );
             } else {
-                let dialog = this.props.localHashing ? getLangText('choose a file to hash') : getLangText('choose a file to upload');
-
-                return (
-                    <span className="file-drag-and-drop-dialog">
-                        <p>{getLangText('Drag a file here')}</p>
-                        <p>{getLangText('or')}</p>
-                        <span
-                            className="btn btn-default"
-                            onClick={this.props.onClick}>
-                                {dialog}
+                if(this.props.multipleFiles) {
+                    return (
+                        <span className="file-drag-and-drop-dialog">
+                            {getLangText('Click or drag to add files')}
                         </span>
-                    </span>
-                );
+                    );
+                } else {
+                    let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload');
+
+                    return (
+                        <span className="file-drag-and-drop-dialog">
+                            <p>{getLangText('Drag a file here')}</p>
+                            <p>{getLangText('or')}</p>
+                            <span
+                                className="btn btn-default"
+                                onClick={this.props.onClick}>
+                                    {dialog}
+                            </span>
+                        </span>
+                    );
+                }
             }
         }
     }

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -281,8 +281,7 @@ var ReactS3FineUploader = React.createClass({
                 } else {
                     throw new Error(getLangText('Could not find a url to download.'));
                 }
-                console.log(res);
-                resolve(res.key);
+                resolve(res);
             })
             .catch((err) => {
                 reject(err);

sass/ascribe_uploader.scss

@@ -19,6 +19,16 @@
     outline: 0;
 }
 
+.present-options {
+    > p {
+        margin-bottom: .75em !important;
+    }
+
+    .btn {
+        margin: 0 1em 0 1em;
+    }
+}
+
 .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
     font-size: 1.5em !important;