From ba5d5324576bafaebd9815daa4ed3c2d4ad9434b Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 4 Jan 2018 10:39:51 -0800 Subject: [PATCH] fixed click file selection and cancel function --- public/bundle/bundle.js | 57 +++++++++++++++++++++-------- react/components/dropzone.jsx | 17 ++++++++- react/components/publishDetails.jsx | 6 +-- react/uploader.js | 28 ++++++++------ 4 files changed, 77 insertions(+), 31 deletions(-) diff --git a/public/bundle/bundle.js b/public/bundle/bundle.js index 67ad6edb..2fb20ed0 100644 --- a/public/bundle/bundle.js +++ b/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 = { - showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING - file: null, - title: '', - channel: '', - url: '', - thumbnail: '', - description: '', - license: '', - nsfw: '' - }; + _this.state = initialState; // 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', - value: function cancelPublish() { - // cancel this publish + key: 'clearUploaderState', + value: function clearUploaderState() { + this.props.clearUploaderState(); } }, { key: 'render', diff --git a/react/components/dropzone.jsx b/react/components/dropzone.jsx index d0c1e9f4..c4c19a0f 100644 --- a/react/components/dropzone.jsx +++ b/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 (
- +
diff --git a/react/components/publishDetails.jsx b/react/components/publishDetails.jsx index 6c42fdc4..f3150f74 100644 --- a/react/components/publishDetails.jsx +++ b/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 () { - // cancel this publish + clearUploaderState () { + this.props.clearUploaderState(); } render () { return ( diff --git a/react/uploader.js b/react/uploader.js index 0d0f7a2b..911b3e79 100644 --- a/react/uploader.js +++ b/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 = { - showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING - file : null, - title : '', - channel : '', - url : '', - thumbnail : '', - description : '', - license : '', - nsfw : '', - }; + this.state = initialState; // 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 &&