94 lines
2.2 KiB
JavaScript
94 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
class Dropzone extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = { hightlight: false };
|
|
this.fileInputRef = React.createRef();
|
|
this.openFileDialog = this.openFileDialog.bind(this);
|
|
this.onFilesAdded = this.onFilesAdded.bind(this);
|
|
this.onDragOver = this.onDragOver.bind(this);
|
|
this.onDragLeave = this.onDragLeave.bind(this);
|
|
this.onDrop = this.onDrop.bind(this);
|
|
}
|
|
|
|
openFileDialog() {
|
|
if (this.props.disabled) return;
|
|
this.fileInputRef.current.click();
|
|
}
|
|
|
|
onFilesAdded(evt) {
|
|
if (this.props.disabled) return;
|
|
console.log(evt.target.files)
|
|
console.log(evt.target.result)
|
|
|
|
const files = evt.target.files;
|
|
if (this.props.onFilesAdded) {
|
|
const array = this.fileListToArray(files);
|
|
this.props.onFilesAdded(array);
|
|
}
|
|
}
|
|
|
|
fileListToArray(list) {
|
|
const array = [];
|
|
for (var i = 0; i < list.length; i++) {
|
|
array.push(list.item(i));
|
|
}
|
|
return array;
|
|
}
|
|
|
|
onDragOver(evt) {
|
|
evt.preventDefault();
|
|
if (this.props.disabled) return;
|
|
this.setState({ hightlight: true });
|
|
}
|
|
|
|
onDragLeave() {
|
|
this.setState({ hightlight: false });
|
|
}
|
|
|
|
onDrop(event) {
|
|
event.preventDefault();
|
|
if (this.props.disabled) return;
|
|
const files = event.dataTransfer.files;
|
|
if (this.props.onFilesAdded) {
|
|
const array = this.fileListToArray(files);
|
|
this.props.onFilesAdded(array);
|
|
}
|
|
this.setState({ hightlight: false });
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
className={`c-Dropzone ${this.state.hightlight ? "Highlight" : ""}`}
|
|
onClick={this.openFileDialog}
|
|
onDragOver={this.onDragOver}
|
|
onDragLeave={this.onDragLeave}
|
|
onDrop={this.onDrop}
|
|
style={{ cursor: this.props.disabled ? "default" : "pointer" }}
|
|
>
|
|
<img
|
|
alt="upload"
|
|
className="Icon"
|
|
src="/images/cloud.jpg"
|
|
/>
|
|
<input
|
|
ref={this.fileInputRef}
|
|
className="FileInput"
|
|
type="file"
|
|
multiple
|
|
onChange={this.onFilesAdded}
|
|
/>
|
|
<span>Upload Files</span>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Dropzone.propTypes = {
|
|
onFilesAdded: PropTypes.func
|
|
};
|
|
|
|
export default Dropzone; |