Consistent file uploads (#4699)

* FileSelect component

* Use FileSelect component in Actionbar

* Convert CreateAccount/Import to FileSelect

js/src/modals/CreateAccount/NewImport/newImport.js

@@ -14,19 +14,14 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { FloatingActionButton } from 'material-ui';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input } from '~/ui';
-import { AttachFileIcon } from '~/ui/Icons';
+import { Form, FileSelect, Input } from '~/ui';
 
 import styles from '../createAccount.css';
 
-const STYLE_HIDDEN = { display: 'none' };
-
 @observer
 export default class NewImport extends Component {
   static propTypes = {
@@ -34,7 +29,7 @@ export default class NewImport extends Component {
   }
 
   render () {
-    const { name, nameError, password, passwordHint, walletFile, walletFileError } = this.props.store;
+    const { name, nameError, password, passwordHint } = this.props.store;
 
     return (
       <Form>
@@ -93,58 +88,48 @@ export default class NewImport extends Component {
             />
           </div>
         </div>
-        <div>
-          <Input
-            disabled
-            error={ walletFileError }
-            hint={
-              <FormattedMessage
-                id='createAccount.newImport.file.hint'
-                defaultMessage='the wallet file for import'
-              />
-            }
-            label={
-              <FormattedMessage
-                id='createAccount.newImport.file.label'
-                defaultMessage='wallet file'
-              />
-            }
-            value={ walletFile }
-          />
-          <div className={ styles.upload }>
-            <FloatingActionButton
-              mini
-              onTouchTap={ this.openFileDialog }
-            >
-              <AttachFileIcon />
-            </FloatingActionButton>
-            <input
-              onChange={ this.onFileChange }
-              ref='fileUpload'
-              style={ STYLE_HIDDEN }
-              type='file'
-            />
-          </div>
-        </div>
+        { this.renderFileSelector() }
       </Form>
     );
   }
 
-  onFileChange = (event) => {
-    const { store } = this.props;
+  renderFileSelector () {
+    const { walletFile, walletFileError } = this.props.store;
 
-    if (event.target.files.length) {
-      const reader = new FileReader();
-
-      reader.onload = (event) => store.setWalletJson(event.target.result);
-      reader.readAsText(event.target.files[0]);
-    }
-
-    store.setWalletFile(event.target.value);
+    return walletFile
+      ? (
+        <Input
+          disabled
+          error={ walletFileError }
+          hint={
+            <FormattedMessage
+              id='createAccount.newImport.file.hint'
+              defaultMessage='the wallet file for import'
+            />
+          }
+          label={
+            <FormattedMessage
+              id='createAccount.newImport.file.label'
+              defaultMessage='wallet file'
+            />
+          }
+          value={ walletFile }
+        />
+      )
+      : (
+        <FileSelect
+          className={ styles.fileImport }
+          error={ walletFileError }
+          onSelect={ this.onFileSelect }
+        />
+      );
   }
 
-  openFileDialog = () => {
-    ReactDOM.findDOMNode(this.refs.fileUpload).click();
+  onFileSelect = (fileName, fileContent) => {
+    const { store } = this.props;
+
+    store.setWalletFile(fileName);
+    store.setWalletJson(fileContent);
   }
 
   onEditName = (event, name) => {

js/src/modals/CreateAccount/createAccount.css

@@ -101,17 +101,6 @@
   width: 10% !important;
 }
 
-.upload {
-  text-align: right;
-  float: right;
-  margin-left: -100%;
-  margin-top: 28px;
-}
-
-.upload>div {
-  margin-right: 0.5em;
-}
-
 .checkbox {
   margin-top: 2em;
 }
@@ -131,6 +120,11 @@
   }
 }
 
+.fileImport {
+  height: 9em;
+  margin-top: 1em;
+}
+
 .summary {
   line-height: 1.618em;
   padding: 0 4em 1.5em 4em;

js/src/modals/CreateAccount/store.js

@@ -93,8 +93,11 @@ export default class Store {
       this.phrase = '';
       this.name = '';
       this.nameError = null;
+      this.rawKey = '';
       this.rawKeyError = null;
+      this.walletFile = '';
       this.walletFileError = null;
+      this.walletJson = '';
     });
   }
 

js/src/modals/CreateAccount/store.spec.js

@@ -64,13 +64,24 @@ describe('modals/CreateAccount/Store', () => {
 
   describe('@action', () => {
     describe('clearErrors', () => {
+      beforeEach(() => {
+        store.setName('');
+        store.setPassword('123');
+        store.setRawKey('test');
+        store.setWalletFile('test');
+        store.setWalletJson('test');
+      });
+
       it('clears all errors', () => {
         store.clearErrors();
 
         expect(store.nameError).to.be.null;
         expect(store.passwordRepeatError).to.be.null;
+        expect(store.rawKey).to.equal('');
         expect(store.rawKeyError).to.be.null;
+        expect(store.walletFile).to.equal('');
         expect(store.walletFileError).to.be.null;
+        expect(store.walletJson).to.equal('');
       });
     });