LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

fixed click file selection and cancel function

Browse source
This commit is contained in:
bill bittner 2018-01-04 10:39:51 -08:00
parent 408cb2ca4b
commit ba5d532457
4 changed files with 77 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
public/bundle/bundle.js
View file

@ -975,16 +975,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
var DROPZONE = 'DROPZONE';
var DETAILS = 'DETAILS';
var STATUS = 'STATUS';
var Uploader = function (_React$Component) {
_inherits(Uploader, _React$Component);
function Uploader(props) {
_classCallCheck(this, Uploader);
var _this = _possibleConstructorReturn(this, (Uploader.__proto__ || Object.getPrototypeOf(Uploader)).call(this, props));
_this.state = {
var initialState = {
showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
file: null,
title: '',
@ -994,9 +985,20 @@ var Uploader = function (_React$Component) {
description: '',
license: '',
nsfw: ''
};
};
var Uploader = function (_React$Component) {
_inherits(Uploader, _React$Component);
function Uploader(props) {
_classCallCheck(this, Uploader);
var _this = _possibleConstructorReturn(this, (Uploader.__proto__ || Object.getPrototypeOf(Uploader)).call(this, props));
_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',

17
react/components/dropzone.jsx
View file

@ -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">

6
react/components/publishDetails.jsx
View file

@ -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 (

18
react/uploader.js
View file

@ -7,11 +7,7 @@ import PublishStatus from './components/publishStatus.jsx';
const DROPZONE = 'DROPZONE';
const DETAILS = 'DETAILS';
const STATUS = 'STATUS';
class Uploader extends React.Component {
constructor (props) {
super(props);
this.state = {
const initialState = {
showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
file : null,
title : '',
@ -21,9 +17,15 @@ class Uploader extends React.Component {
description : '',
license : '',
nsfw : '',
};
}
class Uploader extends React.Component {
constructor (props) {
super(props);
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 &&
<PublishDetails
updateUploaderState={this.updateUploaderState}
clearUploaderState={this.clearUploaderState}
file={this.state.file}
title={this.state.title}
channel={this.state.channel}