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

fixed error display on drag end

Browse source
This commit is contained in:
bill bittner 2018-01-04 11:54:18 -08:00
parent 6db3d1da19
commit c62a9c479e
4 changed files with 39 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/assets/img/loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9 KiB

40
public/bundle/bundle.js
View file

@ -18398,7 +18398,8 @@ var Dropzone = function (_React$Component) {
var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props)); var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props));
_this.state = { _this.state = {
fileError: null fileError: null,
dragOver: false
}; };
_this.handleDrop = _this.handleDrop.bind(_this); _this.handleDrop = _this.handleDrop.bind(_this);
_this.handleDragOver = _this.handleDragOver.bind(_this); _this.handleDragOver = _this.handleDragOver.bind(_this);
@ -18451,8 +18452,8 @@ var Dropzone = function (_React$Component) {
}, { }, {
key: 'handleDrop', key: 'handleDrop',
value: function handleDrop(event) { value: function handleDrop(event) {
console.log('handleDrop', event);
event.preventDefault(); event.preventDefault();
this.setState({ dragOver: false });
// if dropped items aren't files, reject them // if dropped items aren't files, reject them
var dt = event.dataTransfer; var dt = event.dataTransfer;
console.log('dt', dt); console.log('dt', dt);
@ -18464,7 +18465,7 @@ var Dropzone = function (_React$Component) {
try { try {
this.validateFile(droppedFile); // validate the file's name, type, and size this.validateFile(droppedFile); // validate the file's name, type, and size
} catch (error) { } catch (error) {
return this.setState('fileError', error.message); return this.setState({ fileError: error.message });
} }
// stage it so it will be ready when the publish button is clicked // stage it so it will be ready when the publish button is clicked
this.props.stageFileAndShowDetails(droppedFile); this.props.stageFileAndShowDetails(droppedFile);
@ -18491,18 +18492,12 @@ var Dropzone = function (_React$Component) {
}, { }, {
key: 'handleDragEnter', key: 'handleDragEnter',
value: function handleDragEnter() { value: function handleDragEnter() {
var thisDropzone = document.getElementById('primary-dropzone'); this.setState({ dragOver: true });
thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--padded row--tall flex-container--column flex-container--center-center');
thisDropzone.firstElementChild.setAttribute('class', 'hidden');
thisDropzone.lastElementChild.setAttribute('class', '');
} }
}, { }, {
key: 'handleDragLeave', key: 'handleDragLeave',
value: function handleDragLeave() { value: function handleDragLeave() {
var thisDropzone = document.getElementById('primary-dropzone'); this.setState({ dragOver: false });
thisDropzone.setAttribute('class', 'dropzone row row--tall row--padded flex-container--column flex-container--center-center');
thisDropzone.firstElementChild.setAttribute('class', '');
thisDropzone.lastElementChild.setAttribute('class', 'hidden');
} }
}, { }, {
key: 'handleClick', key: 'handleClick',
@ -18521,7 +18516,7 @@ var Dropzone = function (_React$Component) {
try { try {
this.validateFile(chosenFile); // validate the file's name, type, and size this.validateFile(chosenFile); // validate the file's name, type, and size
} catch (error) { } catch (error) {
return this.setState('fileError', error.message); return this.setState({ fileError: error.message });
} }
// stage it so it will be ready when the publish button is clicked // stage it so it will be ready when the publish button is clicked
this.props.stageFileAndShowDetails(chosenFile); this.props.stageFileAndShowDetails(chosenFile);
@ -18540,13 +18535,21 @@ var Dropzone = function (_React$Component) {
), ),
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ id: 'primary-dropzone', className: 'dropzone row 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 }, { id: 'primary-dropzone', className: 'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver && ' dropzone--drag-over'), onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragEnd: this.handleDragEnd, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onClick: this.handleClick },
this.state.dragOver ? _react2.default.createElement(
'div',
{ id: 'dropbzone-dragover' },
_react2.default.createElement( _react2.default.createElement(
'p',
{ className: 'blue' },
'Drop it.'
)
) : _react2.default.createElement(
'div', 'div',
{ id: 'primary-dropzone-instructions' }, { id: 'primary-dropzone-instructions' },
_react2.default.createElement( _react2.default.createElement(
'p', 'p',
{ className: 'info-message-placeholder info-message--failure', id: 'input-error-file-selection', hidden: 'true' }, { className: 'info-message-placeholder info-message--failure', id: 'input-error-file-selection' },
this.state.fileError this.state.fileError
), ),
_react2.default.createElement( _react2.default.createElement(
@ -18564,15 +18567,6 @@ var Dropzone = function (_React$Component) {
{ className: 'blue--underlined' }, { className: 'blue--underlined' },
'CHOOSE FILE' 'CHOOSE FILE'
) )
),
_react2.default.createElement(
'div',
{ id: 'dropbzone-dragover', className: 'hidden' },
_react2.default.createElement(
'p',
{ className: 'blue' },
'Drop it.'
)
) )
) )
); );

30
react/components/dropzone.jsx
View file

@ -5,6 +5,7 @@ class Dropzone extends React.Component {
super(props); super(props);
this.state = { this.state = {
fileError: null, fileError: null,
dragOver : false,
} }
this.handleDrop = this.handleDrop.bind(this); this.handleDrop = this.handleDrop.bind(this);
this.handleDragOver = this.handleDragOver.bind(this); this.handleDragOver = this.handleDragOver.bind(this);
@ -51,8 +52,8 @@ class Dropzone extends React.Component {
} }
} }
handleDrop (event) { handleDrop (event) {
console.log('handleDrop', event);
event.preventDefault(); event.preventDefault();
this.setState({dragOver: false});
// if dropped items aren't files, reject them // if dropped items aren't files, reject them
const dt = event.dataTransfer; const dt = event.dataTransfer;
console.log('dt', dt); console.log('dt', dt);
@ -64,7 +65,7 @@ class Dropzone extends React.Component {
try { try {
this.validateFile(droppedFile); // validate the file's name, type, and size this.validateFile(droppedFile); // validate the file's name, type, and size
} catch (error) { } catch (error) {
return this.setState('fileError', error.message); return this.setState({fileError: error.message});
} }
// stage it so it will be ready when the publish button is clicked // stage it so it will be ready when the publish button is clicked
this.props.stageFileAndShowDetails(droppedFile); this.props.stageFileAndShowDetails(droppedFile);
@ -85,16 +86,10 @@ class Dropzone extends React.Component {
} }
} }
handleDragEnter () { handleDragEnter () {
const thisDropzone = document.getElementById('primary-dropzone'); this.setState({dragOver: true});
thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--padded row--tall flex-container--column flex-container--center-center');
thisDropzone.firstElementChild.setAttribute('class', 'hidden');
thisDropzone.lastElementChild.setAttribute('class', '');
} }
handleDragLeave () { handleDragLeave () {
const thisDropzone = document.getElementById('primary-dropzone'); this.setState({dragOver: false});
thisDropzone.setAttribute('class', 'dropzone row row--tall row--padded flex-container--column flex-container--center-center');
thisDropzone.firstElementChild.setAttribute('class', '');
thisDropzone.lastElementChild.setAttribute('class', 'hidden');
} }
handleClick (event) { handleClick (event) {
event.preventDefault(); event.preventDefault();
@ -109,7 +104,7 @@ class Dropzone extends React.Component {
try { try {
this.validateFile(chosenFile); // validate the file's name, type, and size this.validateFile(chosenFile); // validate the file's name, type, and size
} catch (error) { } catch (error) {
return this.setState('fileError', error.message); return this.setState({fileError: error.message});
} }
// stage it so it will be ready when the publish button is clicked // stage it so it will be ready when the publish button is clicked
this.props.stageFileAndShowDetails(chosenFile); this.props.stageFileAndShowDetails(chosenFile);
@ -121,16 +116,19 @@ class Dropzone extends React.Component {
<form> <form>
<input className="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onChange={this.handleFileInput} 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> </form>
<div id="primary-dropzone" className="dropzone row 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" className={'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver && ' dropzone--drag-over')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onClick={this.handleClick}>
{ this.state.dragOver ? (
<div id="dropbzone-dragover">
<p className="blue">Drop it.</p>
</div>
) : (
<div id="primary-dropzone-instructions"> <div id="primary-dropzone-instructions">
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true">{this.state.fileError}</p> <p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.state.fileError}</p>
<p>Drag & drop image or video here to publish</p> <p>Drag & drop image or video here to publish</p>
<p className="fine-print">OR</p> <p className="fine-print">OR</p>
<p className="blue--underlined">CHOOSE FILE</p> <p className="blue--underlined">CHOOSE FILE</p>
</div> </div>
<div id="dropbzone-dragover" className="hidden"> )}
<p className="blue">Drop it.</p>
</div>
</div> </div>
</div> </div>
); );

6
views/index.handlebars
View file

@ -1,5 +1,9 @@
<div class="row row--tall flex-container--column"> <div class="row row--tall flex-container--column">
<div id="react-uploader" class="row row--padded row--tall"></div> <div id="react-uploader" class="row row--padded row--tall">
<div class="row row--padded row--tall flex-container--column flex-container--center-center">
<img src="/assets/img/loading.gif" alt="loading">
</div>
</div>
</div> </div>
<script src="/bundle/bundle.js"></script> <script src="/bundle/bundle.js"></script>