feat(load): enable load from file or paste

src/FileUpload.js

@@ -0,0 +1,103 @@
+import React, {Component} from 'react'
+import ReactDOM from 'react-dom';
+import { FormGroup, ControlLabel, FormControl, Label, Button, HelpBlock, Row, Col} from 'react-bootstrap';
+
+
+
+class FileUpload extends Component {
+
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleTextChange = this.handleTextChange.bind(this);
+		this.loadText = this.loadText.bind(this);
+		this.state = {
+			xmlText: '',
+			showWarning: false
+		};
+	}
+
+	getValidationState() {
+		//const length = this.state.xmlText.length;
+		if (this.state.showWarning) return 'error'
+		//else if (length > 0) return 'success';
+		//else if (length == 0) return 'warning';
+		return null;
+	}
+
+	handleTextChange(e) {
+		if (this.state.xmlText.length > 0) this.setState({showWarning: false})
+		this.setState({ xmlText: e.target.value });
+	}
+
+	readFile(file) {
+		const reader = new FileReader()
+		reader.onload = event => {
+			this.props.fileCB(event.target.result)
+		}
+		reader.onerror = error => console.log(error)
+		reader.readAsText(file)
+	}
+
+	handleUpload(event){
+		const input = event.target
+		if ('files' in input && input.files.length > 0) {
+			this.readFile(input.files[0])
+		}
+	}
+
+	loadText() {
+		if (this.state.xmlText.length < 1) {
+			this.setState({showWarning: true})
+		} else {
+			this.setState({showWarning: false})
+			this.props.fileCB(this.state.xmlText)
+		}
+	}
+
+
+	render() {
+		return (
+			<form>
+				<FormGroup>
+					<ControlLabel htmlFor="fileUpload" style={{ cursor: "pointer"}}><h3><Label bsStyle="success">Choose file</Label></h3>
+						<FormControl
+							id="fileUpload"
+							type="file"
+							onChange={this.handleUpload.bind(this)}
+							style={{ display: "none" }}
+						/>
+					</ControlLabel>
+				</FormGroup>
+
+
+				<div style={{padding: '0 0 1.5em 1.5em', background:'#fff'}}> — OR — </div>
+
+
+				<FormGroup
+					controlId="formBasicText"
+
+				>
+					<ControlLabel></ControlLabel>
+						<FormControl
+							componentClass="textarea"
+							rows="9"
+							value={this.state.xmlText}
+							placeholder="Enter your XML here"
+							onChange={this.handleTextChange}
+						/>
+						<FormControl.Feedback />
+					{this.state.showWarning && <HelpBlock>Please enter some text in the box above.</HelpBlock>}
+				</FormGroup>
+
+				<Button onClick={this.loadText}>Open Text in Editor</Button>
+			</form>
+		)
+	}
+}
+function initializeFileUploadComponent(targetElement, fileCB) {
+	return ReactDOM.render(<FileUpload fileCB={fileCB} />, document.getElementById(targetElement))
+}
+
+
+export default initializeFileUploadComponent

src/Load.js

@@ -11,6 +11,7 @@ if ($ === undefined) {
 }
 
 import initializeReactResultComponent from "./ResultList.js";
+import initializeFileUploadComponent from "./FileUpload.js";
 import showPagination from "./Paginator.js";
 import showExistingDocModal from "./ExistingDocModal.js";
 import authenticate from './authenticate.js'
@@ -23,8 +24,8 @@ function loadIntoWriter(writer, xmlDoc) {
 	writer.loadDocumentXML(xmlDoc);
 	writer.isDocLoaded = true;
 }
-function setDocInEditor(writer, result) {
-	var xmlDoc = $.parseXML(result.doc);
+function setDocInEditor(writer, doc) {
+	var xmlDoc = $.parseXML(doc);
 	loadIntoWriter(writer, xmlDoc);
 }
 
@@ -48,7 +49,7 @@ function isCurrentDocValid(writer) {
 function loadDoc(writer, repo, path) {
 	return cwrcGit.getDoc(repo, 'master', path)
 		.done(function( result ) {
-			setDocInEditor(writer, result)
+			setDocInEditor(writer, result.doc)
 			writer.repoName = repo;
 			writer.filePathInGithub = path;
 		}).fail(function(errorMessage) {
@@ -73,6 +74,11 @@ function fileSelectCB(writer, repo, path){
 	$('#githubLoadModal').modal('hide');
 }
 
+function fileCB(writer, textContents){
+	loadIntoWriter(writer, textContents)
+	$('#githubLoadModal').modal('hide');
+}
+
 function getInfoForAuthenticatedUser(writer) {
 	cwrcGit.getInfoForAuthenticatedUser()
 		.then((info) => {
@@ -86,14 +92,14 @@ function getInfoForAuthenticatedUser(writer) {
 		});
 }
 
-function createTargetElement(elementName) {
+function createTargetElement(writer, elementName) {
 	if ($(`#${elementName}`).length == 0) {
 		$(writer.dialogManager.getDialogWrapper()).append(`<div id="${elementName}"/>`)
 	}
 }
 
 function initializePrivatePanel(writer) {
-	createTargetElement('github-private-doc-list')
+	createTargetElement(writer, 'github-private-doc-list')
 	const resultListComponent = initializeReactResultComponent('github-private-doc-list', fileSelectCB.bind(null, writer));
 	getInfoForAuthenticatedUser(writer);
 	showReposForAuthenticatedUser(writer,'private-pagination', 1, resultListComponent, 'owner')
@@ -113,7 +119,7 @@ function initializePrivatePanel(writer) {
 }
 
 function initializePublicPanel(writer) {
-	createTargetElement('github-public-doc-list')
+	createTargetElement(writer, 'github-public-doc-list')
 	const resultListComponent = initializeReactResultComponent('github-public-doc-list', fileSelectCB.bind(null, writer));
 	$('#github-public-form').submit(function(event){
 		event.preventDefault();
@@ -127,6 +133,11 @@ function initializePublicPanel(writer) {
 	});
 }
 
+function initializeUploadPanel(writer) {
+	createTargetElement(writer, 'github-upload-form')
+	const uploadComponent = initializeFileUploadComponent('github-upload-form', fileCB.bind(null, writer));
+}
+
 function showReposForAuthenticatedUser(writer, pagingContainerId, requestedPage, resultComponent, affiliation) {
 	cwrcGit.getReposForAuthenticatedGithubUser(requestedPage, 20, affiliation).then(results=>{
 		const pagingCB = (requestedPage, resultComponent)=>showReposForAuthenticatedUser(writer, 'private-pagination', requestedPage, resultComponent, affiliation)
@@ -229,6 +240,9 @@ function showLoadModal(writer) {
                           <li class="nav-item">
                             <a class="nav-link" data-toggle="tab" href="#templates" role="tab">CWRC Templates</a>
                           </li>
+                          <li class="nav-item">
+                            <a class="nav-link" data-toggle="tab" href="#upload" role="tab">Load File or Text</a>
+                          </li>
                           
                         </ul>
 
@@ -317,6 +331,11 @@ function showLoadModal(writer) {
                                 <div id="template-list" class="list-group" style="padding-top:1em"></div>
                             </div><!-- /tab-pane -->                     
 
+							 <!-- UPLOAD PANE -->
+                            <div class="tab-pane" id="upload" role="tabpanel">
+                                <div id="github-upload-form" class="list-group" style="padding-top:1em"></div>
+                            </div><!-- /tab-pane -->  
+                            
                         </div> <!-- /tab-content -->
                     </div><!-- /.modal-body -->
                     <div class="modal-footer">
@@ -359,6 +378,8 @@ function showLoadModal(writer) {
 
 		initializePublicPanel(writer);
 
+		initializeUploadPanel(writer);
+
 		showTemplates(writer);
 
 		$('#open-new-doc-btn').show();