WIP: make fineuploader an input

js/components/ascribe_detail/further_details_fileuploader.js

@@ -39,7 +39,7 @@ let FurtherDetailsFileuploader = React.createClass({
             return null;
         }
 
-        let otherDataIds = this.props.otherData ? this.props.otherData.map((data)=>{return data.id; }).join() : null;
+        let otherDataIds = this.props.otherData ? this.props.otherData.map((data) => data.id).join() : null;
 
         return (
             <Property

js/components/ascribe_forms/form.js

@@ -60,8 +60,9 @@ let Form = React.createClass({
         };
     },
 
-    reset(){
+    reset() {
-        for (let ref in this.refs){
+        console.log(this.refs);
+        for(let ref in this.refs) {
             if (typeof this.refs[ref].reset === 'function'){
                 this.refs[ref].reset();
             }
@@ -70,7 +71,6 @@ let Form = React.createClass({
     },
 
     submit(event){
-        
         if(event) {
             event.preventDefault();
         }
@@ -100,16 +100,18 @@ let Form = React.createClass({
             .catch(this.handleError);
     },
 
-    getFormData(){
+    getFormData() {
         let data = {};
         for (let ref in this.refs){
             data[this.refs[ref].props.name] = this.refs[ref].state.value;
         }
 
-        if ('getFormData' in this.props){
+        console.log(this.props);
+        if (this.props.getFormData){
             data = mergeOptionsWithDuplicates(data, this.props.getFormData());
         }
 
+        console.log(data);
         return data;
     },
 
@@ -136,7 +138,7 @@ let Form = React.createClass({
         if (err.json) {
             for (var input in err.json.errors){
                 if (this.refs && this.refs[input] && this.refs[input].state) {
-                    this.refs[input].setErrors( err.json.errors[input]);
+                    this.refs[input].setErrors(err.json.errors[input]);
                 } else {
                     this.setState({errors: this.state.errors.concat(err.json.errors[input])});
                 }
@@ -206,7 +208,7 @@ let Form = React.createClass({
     },
 
     renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child) => {
+        return ReactAddons.Children.map(this.props.children, (child, i) => {
             if (child) {
                 return ReactAddons.addons.cloneWithProps(child, {
                     handleChange: this.handleChangeChild,
@@ -251,6 +253,7 @@ let Form = React.createClass({
                 role="form"
                 className={className}
                 onSubmit={this.submit}
+                onReset={this.reset}
                 autoComplete={this.props.autoComplete}>
                 {this.getFakeAutocompletableInputs()}
                 {this.getErrors()}

js/components/ascribe_forms/form_register_piece.js

@@ -7,13 +7,10 @@ import UserActions from '../../actions/user_actions';
 
 import Form from './form';
 import Property from './property';
+import InputFineUploader from './input_fineuploader';
 
-import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
-
-import AppConstants from '../../constants/application_constants';
 import ApiUrls from '../../constants/api_urls';
 
-import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
@@ -45,7 +42,6 @@ let RegisterPieceForm = React.createClass({
     getInitialState(){
         return mergeOptions(
             {
-                digitalWorkKey: null,
                 isUploadReady: false
             },
             UserStore.getState()
@@ -65,18 +61,6 @@ let RegisterPieceForm = React.createClass({
         this.setState(state);
     },
 
-    getFormData(){
-        return {
-            digital_work_key: this.state.digitalWorkKey
-        };
-    },
-
-    submitKey(key){
-        this.setState({
-            digitalWorkKey: key
-        });
-    },
-
     setIsUploadReady(isReady) {
         this.setState({
             isUploadReady: isReady
@@ -94,14 +78,22 @@ let RegisterPieceForm = React.createClass({
                 className="ascribe-form-bordered"
                 ref='form'
                 url={ApiUrls.pieces_list}
-                getFormData={this.getFormData}
                 handleSuccess={this.props.handleSuccess}
-                buttons={<button
+                buttons={
+                    <span>
+                        <button
                             type="submit"
                             className="btn ascribe-btn ascribe-btn-login"
                             disabled={!this.state.isUploadReady || this.props.disabled}>
                             {this.props.submitMessage}
-                        </button>}
+                        </button>
+                        <button
+                            type="reset"
+                            className="btn ascribe-btn ascribe-btn-login">
+                            Reset
+                        </button>
+                    </span>
+                }
                 spinner={
                     <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
@@ -111,9 +103,9 @@ let RegisterPieceForm = React.createClass({
                     <h3>{this.props.headerMessage}</h3>
                 </div>
                 <Property
+                    name="digital_work_key"
                     ignoreFocus={true}>
-                    <FileUploader
+                    <InputFineUploader
-                        submitKey={this.submitKey}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={isReadyForFormSubmission}
                         isFineUploaderActive={this.props.isFineUploaderActive}
@@ -152,73 +144,4 @@ let RegisterPieceForm = React.createClass({
     }
 });
 
-let FileUploader = React.createClass({
-    propTypes: {
-        setIsUploadReady: React.PropTypes.func,
-        submitKey: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        onClick: React.PropTypes.func,
-
-        // isFineUploaderActive is used to lock react fine uploader in case
-        // a user is actually not logged in already to prevent him from droping files
-        // before login in
-        isFineUploaderActive: React.PropTypes.bool,
-        onLoggedOut: React.PropTypes.func,
-        editable: React.PropTypes.bool,
-        enableLocalHashing: React.PropTypes.bool,
-
-        // provided by Property
-        disabled: React.PropTypes.bool
-    },
-
-    render() {
-
-        let editable = this.props.isFineUploaderActive;
-
-        // if disabled is actually set by property, we want to override
-        // isFineUploaderActive
-        if(typeof this.props.disabled !== 'undefined') {
-            editable = !this.props.disabled;
-        }
-
-
-        return (
-            <ReactS3FineUploader
-                onClick={this.props.onClick}
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'digitalwork'
-                }}
-                createBlobRoutine={{
-                    url: ApiUrls.blob_digitalworks
-                }}
-                submitKey={this.props.submitKey}
-                validation={{
-                    itemLimit: 100000,
-                    sizeLimit: '25000000000'
-                }}
-                setIsUploadReady={this.props.setIsUploadReady}
-                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                areAssetsDownloadable={false}
-                areAssetsEditable={editable}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                onInactive={this.props.onLoggedOut}
-                enableLocalHashing={this.props.enableLocalHashing} />
-        );
-    }
-});
-
 export default RegisterPieceForm;

js/components/ascribe_forms/input_fineuploader.js

@@ -0,0 +1,93 @@
+'use strict';
+
+import React from 'react';
+
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+
+import AppConstants from '../../constants/application_constants';
+import ApiUrls from '../../constants/api_urls';
+
+import { getCookie } from '../../utils/fetch_api_utils';
+
+let InputFileUploader = React.createClass({
+    propTypes: {
+        setIsUploadReady: React.PropTypes.func,
+        isReadyForFormSubmission: React.PropTypes.func,
+        onClick: React.PropTypes.func,
+
+        // isFineUploaderActive is used to lock react fine uploader in case
+        // a user is actually not logged in already to prevent him from droping files
+        // before login in
+        isFineUploaderActive: React.PropTypes.bool,
+        onLoggedOut: React.PropTypes.func,
+        editable: React.PropTypes.bool,
+        enableLocalHashing: React.PropTypes.bool,
+
+        // provided by Property
+        disabled: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            value: null
+
+        };
+    },
+
+    submitKey(key){
+        this.setState({
+            value: key
+        });
+    },
+
+    render() {
+
+        let editable = this.props.isFineUploaderActive;
+
+        // if disabled is actually set by property, we want to override
+        // isFineUploaderActive
+        if(typeof this.props.disabled !== 'undefined') {
+            editable = !this.props.disabled;
+        }
+
+
+        return (
+            <ReactS3FineUploader
+                onClick={this.props.onClick}
+                keyRoutine={{
+                    url: AppConstants.serverUrl + 's3/key/',
+                    fileClass: 'digitalwork'
+                }}
+                createBlobRoutine={{
+                    url: ApiUrls.blob_digitalworks
+                }}
+                submitKey={this.submitKey}
+                validation={{
+                    itemLimit: 100000,
+                    sizeLimit: '25000000000'
+                }}
+                setIsUploadReady={this.props.setIsUploadReady}
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                areAssetsDownloadable={false}
+                areAssetsEditable={editable}
+                signature={{
+                    endpoint: AppConstants.serverUrl + 's3/signature/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    }
+                }}
+                deleteFile={{
+                    enabled: true,
+                    method: 'DELETE',
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    }
+                }}
+                onInactive={this.props.onLoggedOut}
+                enableLocalHashing={this.props.enableLocalHashing} />
+        );
+    }
+});
+
+export default InputFileUploader;