fixed click file selection and cancel function

public/bundle/bundle.js

@@ -975,6 +975,17 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var DROPZONE = 'DROPZONE';
 var DETAILS = 'DETAILS';
 var STATUS = 'STATUS';
+var initialState = {
+  showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
+  file: null,
+  title: '',
+  channel: '',
+  url: '',
+  thumbnail: '',
+  description: '',
+  license: '',
+  nsfw: ''
+};
 
 var Uploader = function (_React$Component) {
   _inherits(Uploader, _React$Component);
@@ -984,19 +995,10 @@ var Uploader = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, (Uploader.__proto__ || Object.getPrototypeOf(Uploader)).call(this, props));
 
-    _this.state = {
+    _this.state = initialState;
-      showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
-      file: null,
-      title: '',
-      channel: '',
-      url: '',
-      thumbnail: '',
-      description: '',
-      license: '',
-      nsfw: ''
-    };
     // bind class methods with `this`
     _this.updateUploaderState = _this.updateUploaderState.bind(_this);
+    _this.clearUploaderState = _this.clearUploaderState.bind(_this);
     _this.showComponent = _this.showComponent.bind(_this);
     _this.stageFileAndShowDetails = _this.stageFileAndShowDetails.bind(_this);
     return _this;
@@ -1008,6 +1010,11 @@ var Uploader = function (_React$Component) {
       console.log('updateUploaderState ' + name + ' ' + value);
       this.setState(_defineProperty({}, name, value));
     }
+  }, {
+    key: 'clearUploaderState',
+    value: function clearUploaderState() {
+      this.setState(initialState);
+    }
   }, {
     key: 'showComponent',
     value: function showComponent(component) {
@@ -1031,6 +1038,7 @@ var Uploader = function (_React$Component) {
         this.state.showComponent === DROPZONE && _react2.default.createElement(_dropzone2.default, { stageFileAndShowDetails: this.stageFileAndShowDetails }),
         this.state.showComponent === DETAILS && _react2.default.createElement(_publishDetails2.default, {
           updateUploaderState: this.updateUploaderState,
+          clearUploaderState: this.clearUploaderState,
           file: this.state.file,
           title: this.state.title,
           channel: this.state.channel,
@@ -18398,6 +18406,7 @@ var Dropzone = function (_React$Component) {
     _this.handleDragEnter = _this.handleDragEnter.bind(_this);
     _this.handleDragLeave = _this.handleDragLeave.bind(_this);
     _this.handleClick = _this.handleClick.bind(_this);
+    _this.handleFileInput = _this.handleFileInput.bind(_this);
     return _this;
   }
 
@@ -18502,6 +18511,22 @@ var Dropzone = function (_React$Component) {
       // trigger file input
       document.getElementById('file_input').click();
     }
+  }, {
+    key: 'handleFileInput',
+    value: function handleFileInput(event) {
+      event.preventDefault();
+      var fileList = event.target.files;
+      var chosenFile = fileList[0];
+      if (chosenFile) {
+        try {
+          this.validateFile(chosenFile); // validate the file's name, type, and size
+        } catch (error) {
+          return this.setState('fileError', error.message);
+        }
+        // stage it so it will be ready when the publish button is clicked
+        this.props.stageFileAndShowDetails(chosenFile);
+      }
+    }
   }, {
     key: 'render',
     value: function render() {
@@ -18511,7 +18536,7 @@ var Dropzone = function (_React$Component) {
         _react2.default.createElement(
           'form',
           null,
-          _react2.default.createElement('input', { className: 'input-file', type: 'file', id: 'file_input', name: 'file_input', accept: 'video/*,image/*', onChange: this.handleDrop, encType: 'multipart/form-data' })
+          _react2.default.createElement('input', { className: 'input-file', type: 'file', id: 'file_input', name: 'file_input', accept: 'video/*,image/*', onChange: this.handleFileInput, encType: 'multipart/form-data' })
         ),
         _react2.default.createElement(
           'div',
@@ -18739,7 +18764,7 @@ var PublishDetails = function (_React$Component6) {
     _this6.showThumbnailTool = _this6.showThumbnailTool.bind(_this6);
     _this6.hideThumbnailTool = _this6.hideThumbnailTool.bind(_this6);
     _this6.publish = _this6.publish.bind(_this6);
-    _this6.cancelPublish = _this6.cancelPublish.bind(_this6);
+    _this6.clearUploaderState = _this6.clearUploaderState.bind(_this6);
     return _this6;
   }
 
@@ -18764,9 +18789,9 @@ var PublishDetails = function (_React$Component6) {
       // publish the asset
     }
   }, {
-    key: 'cancelPublish',
+    key: 'clearUploaderState',
-    value: function cancelPublish() {
+    value: function clearUploaderState() {
-      // cancel this publish
+      this.props.clearUploaderState();
     }
   }, {
     key: 'render',

react/components/dropzone.jsx

@@ -12,6 +12,7 @@ class Dropzone extends React.Component {
     this.handleDragEnter = this.handleDragEnter.bind(this);
     this.handleDragLeave = this.handleDragLeave.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleFileInput = this.handleFileInput.bind(this);
   }
   validateFile (file) {
     if (!file) {
@@ -100,11 +101,25 @@ class Dropzone extends React.Component {
     // trigger file input
     document.getElementById('file_input').click();
   }
+  handleFileInput (event) {
+    event.preventDefault();
+    const fileList = event.target.files;
+    const chosenFile = fileList[0];
+    if (chosenFile) {
+      try {
+        this.validateFile(chosenFile); // validate the file's name, type, and size
+      } catch (error) {
+        return this.setState('fileError', error.message);
+      }
+      // stage it so it will be ready when the publish button is clicked
+      this.props.stageFileAndShowDetails(chosenFile);
+    }
+  }
   render () {
     return (
       <div>
         <form>
-          <input className="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onChange={this.handleDrop} encType="multipart/form-data"/>
+          <input className="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onChange={this.handleFileInput} encType="multipart/form-data"/>
         </form>
         <div id="primary-dropzone" className="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-center" onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onClick={this.handleClick}>
           <div id="primary-dropzone-instructions">

react/components/publishDetails.jsx

@@ -70,7 +70,7 @@ class PublishDetails extends React.Component {
     this.showThumbnailTool = this.showThumbnailTool.bind(this);
     this.hideThumbnailTool = this.hideThumbnailTool.bind(this);
     this.publish = this.publish.bind(this);
-    this.cancelPublish = this.cancelPublish.bind(this);
+    this.clearUploaderState = this.clearUploaderState.bind(this);
   }
   updateUploaderState (name, value) {
     this.props.updateUploaderState(name, value);
@@ -84,8 +84,8 @@ class PublishDetails extends React.Component {
   publish () {
     // publish the asset
   }
-  cancelPublish () {
+  clearUploaderState () {
-    // cancel this publish
+    this.props.clearUploaderState();
   }
   render () {
     return (

react/uploader.js

@@ -7,23 +7,25 @@ import PublishStatus from './components/publishStatus.jsx';
 const DROPZONE = 'DROPZONE';
 const DETAILS = 'DETAILS';
 const STATUS = 'STATUS';
+const initialState = {
+  showComponent: DROPZONE,  // DROPZONE, DETAILS, or PUBLISHING
+  file         : null,
+  title        : '',
+  channel      : '',
+  url          : '',
+  thumbnail    : '',
+  description  : '',
+  license      : '',
+  nsfw         : '',
+}
 
 class Uploader extends React.Component {
   constructor (props) {
     super(props);
-    this.state = {
+    this.state = initialState;
-      showComponent: DROPZONE,  // DROPZONE, DETAILS, or PUBLISHING
-      file         : null,
-      title        : '',
-      channel      : '',
-      url          : '',
-      thumbnail    : '',
-      description  : '',
-      license      : '',
-      nsfw         : '',
-    };
     // bind class methods with `this`
     this.updateUploaderState = this.updateUploaderState.bind(this);
+    this.clearUploaderState = this.clearUploaderState.bind(this);
     this.showComponent = this.showComponent.bind(this);
     this.stageFileAndShowDetails = this.stageFileAndShowDetails.bind(this);
   }
@@ -31,6 +33,9 @@ class Uploader extends React.Component {
     console.log(`updateUploaderState ${name} ${value}`);
     this.setState({[name]: value});
   }
+  clearUploaderState () {
+    this.setState(initialState);
+  }
   showComponent (component) {
     this.setState({showComponent: component});
   }
@@ -50,6 +55,7 @@ class Uploader extends React.Component {
         { this.state.showComponent === DETAILS &&
           <PublishDetails
             updateUploaderState={this.updateUploaderState}
+            clearUploaderState={this.clearUploaderState}
             file={this.state.file}
             title={this.state.title}
             channel={this.state.channel}