fixed error display on drag end
This commit is contained in:
parent
6db3d1da19
commit
c62a9c479e
4 changed files with 39 additions and 43 deletions
BIN
public/assets/img/loading.gif
Normal file
BIN
public/assets/img/loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 9 KiB |
|
@ -18398,7 +18398,8 @@ var Dropzone = function (_React$Component) {
|
|||
var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props));
|
||||
|
||||
_this.state = {
|
||||
fileError: null
|
||||
fileError: null,
|
||||
dragOver: false
|
||||
};
|
||||
_this.handleDrop = _this.handleDrop.bind(_this);
|
||||
_this.handleDragOver = _this.handleDragOver.bind(_this);
|
||||
|
@ -18451,8 +18452,8 @@ var Dropzone = function (_React$Component) {
|
|||
}, {
|
||||
key: 'handleDrop',
|
||||
value: function handleDrop(event) {
|
||||
console.log('handleDrop', event);
|
||||
event.preventDefault();
|
||||
this.setState({ dragOver: false });
|
||||
// if dropped items aren't files, reject them
|
||||
var dt = event.dataTransfer;
|
||||
console.log('dt', dt);
|
||||
|
@ -18464,7 +18465,7 @@ var Dropzone = function (_React$Component) {
|
|||
try {
|
||||
this.validateFile(droppedFile); // validate the file's name, type, and size
|
||||
} 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
|
||||
this.props.stageFileAndShowDetails(droppedFile);
|
||||
|
@ -18491,18 +18492,12 @@ var Dropzone = function (_React$Component) {
|
|||
}, {
|
||||
key: 'handleDragEnter',
|
||||
value: function handleDragEnter() {
|
||||
var thisDropzone = document.getElementById('primary-dropzone');
|
||||
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', '');
|
||||
this.setState({ dragOver: true });
|
||||
}
|
||||
}, {
|
||||
key: 'handleDragLeave',
|
||||
value: function handleDragLeave() {
|
||||
var thisDropzone = document.getElementById('primary-dropzone');
|
||||
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');
|
||||
this.setState({ dragOver: false });
|
||||
}
|
||||
}, {
|
||||
key: 'handleClick',
|
||||
|
@ -18521,7 +18516,7 @@ var Dropzone = function (_React$Component) {
|
|||
try {
|
||||
this.validateFile(chosenFile); // validate the file's name, type, and size
|
||||
} 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
|
||||
this.props.stageFileAndShowDetails(chosenFile);
|
||||
|
@ -18540,13 +18535,21 @@ var Dropzone = function (_React$Component) {
|
|||
),
|
||||
_react2.default.createElement(
|
||||
'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 },
|
||||
_react2.default.createElement(
|
||||
{ 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(
|
||||
'p',
|
||||
{ className: 'blue' },
|
||||
'Drop it.'
|
||||
)
|
||||
) : _react2.default.createElement(
|
||||
'div',
|
||||
{ id: 'primary-dropzone-instructions' },
|
||||
_react2.default.createElement(
|
||||
'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
|
||||
),
|
||||
_react2.default.createElement(
|
||||
|
@ -18564,15 +18567,6 @@ var Dropzone = function (_React$Component) {
|
|||
{ className: 'blue--underlined' },
|
||||
'CHOOSE FILE'
|
||||
)
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ id: 'dropbzone-dragover', className: 'hidden' },
|
||||
_react2.default.createElement(
|
||||
'p',
|
||||
{ className: 'blue' },
|
||||
'Drop it.'
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
@ -5,6 +5,7 @@ class Dropzone extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
fileError: null,
|
||||
dragOver : false,
|
||||
}
|
||||
this.handleDrop = this.handleDrop.bind(this);
|
||||
this.handleDragOver = this.handleDragOver.bind(this);
|
||||
|
@ -51,8 +52,8 @@ class Dropzone extends React.Component {
|
|||
}
|
||||
}
|
||||
handleDrop (event) {
|
||||
console.log('handleDrop', event);
|
||||
event.preventDefault();
|
||||
this.setState({dragOver: false});
|
||||
// if dropped items aren't files, reject them
|
||||
const dt = event.dataTransfer;
|
||||
console.log('dt', dt);
|
||||
|
@ -64,7 +65,7 @@ class Dropzone extends React.Component {
|
|||
try {
|
||||
this.validateFile(droppedFile); // validate the file's name, type, and size
|
||||
} 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
|
||||
this.props.stageFileAndShowDetails(droppedFile);
|
||||
|
@ -85,16 +86,10 @@ class Dropzone extends React.Component {
|
|||
}
|
||||
}
|
||||
handleDragEnter () {
|
||||
const thisDropzone = document.getElementById('primary-dropzone');
|
||||
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', '');
|
||||
this.setState({dragOver: true});
|
||||
}
|
||||
handleDragLeave () {
|
||||
const thisDropzone = document.getElementById('primary-dropzone');
|
||||
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');
|
||||
this.setState({dragOver: false});
|
||||
}
|
||||
handleClick (event) {
|
||||
event.preventDefault();
|
||||
|
@ -109,7 +104,7 @@ class Dropzone extends React.Component {
|
|||
try {
|
||||
this.validateFile(chosenFile); // validate the file's name, type, and size
|
||||
} 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
|
||||
this.props.stageFileAndShowDetails(chosenFile);
|
||||
|
@ -121,16 +116,19 @@ class Dropzone extends React.Component {
|
|||
<form>
|
||||
<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--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">
|
||||
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true">{this.state.fileError}</p>
|
||||
<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">
|
||||
<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 className="fine-print">OR</p>
|
||||
<p className="blue--underlined">CHOOSE FILE</p>
|
||||
</div>
|
||||
<div id="dropbzone-dragover" className="hidden">
|
||||
<p className="blue">Drop it.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
<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>
|
||||
|
||||
<script src="/bundle/bundle.js"></script>
|
||||
|
|
Loading…
Reference in a new issue