import React, { Component, createRef } from "react"
import Dropzone from 'react-dropzone'
import LinearProgress from '@material-ui/core/LinearProgress'
import Images from "../assets/Images"
import MuiAlert from '@material-ui/lab/Alert';
import { withStyles, Snackbar } from "@material-ui/core";
const dropzoneRef = createRef()
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
class Upload extends Component {
constructor(props) {
super(props)
this.state = {
file: '',
nameFile: 'File name',
typeFile: '',
sizeFile: '0',
inputVisible: true,
previewVisible: false,
labelUploadVisible: false,
iconButtonUpload: 'fa fa-1x fa-upload',
uploadProgress: false,
percentage: '0',
completed: '0',
alert: false,
alertMessage: '',
sizeUpload: this.props.sizeUpload === undefined ? 1 : this.props.sizeUpload
}
}
componentDidUpdate(prevs, next) {
if (prevs.percentage > 0 && prevs.percentage <= 100) {
console.log('old percentage', prevs.percentage)
console.log('new percentage', this.state.percentage)
if (this.state.percentage !== prevs.percentage) {
this.setState({ percentage: prevs.percentage })
}
}
if (prevs.result === 'success' || prevs.result === 'error') {
if (this.state.uploadProgress === true) {
this.setState({ uploadProgress: false, percentage: '100', iconButtonUpload: 'fa fa-1x fa-check' })
}
}
}
componentDidMount() {
if (this.props.docName !== undefined && this.props.docName !== "") {
console.log('masuk');
this.setState({ docName: this.props.docName, docSize: this.props.docSize, inputVisible: false, editVisible: true })
}
}
onDrop = (acceptedFiles) => {
const formData = new FormData()
let length = acceptedFiles[0].name.split(".").length
let fileType = acceptedFiles[0].name.split(".")[length - 1]
formData.append('file', acceptedFiles[0])
// console.log(sizeFile);
if (this.props.intent === 'management') {
if (acceptedFiles) {
if (this.props.acceptedFiles.includes(fileType)) {
if ((acceptedFiles[0].size / 1000).toFixed(0) < (this.state.sizeUpload * 1000)) {
this.setState({
file: acceptedFiles[0],
typeFile: fileType,
nameFile: acceptedFiles[0].name,
sizeFile: (acceptedFiles[0].size / 1000).toFixed(0),
previewVisible: true,
inputVisible: false,
uploadProgress: false,
percentage: '0'
})
this.props.onHandle(acceptedFiles[0])
} else {
this.setState({ alertMessage: `The file is too large. Allowed maximum size is ${this.state.sizeUpload}MB`, alert: true })
// alert('File Tidak Boleh Lebih Dari 1MB')
}
} else {
this.setState({ alertMessage: 'File extension not allowed', alert: true })
// alert('File Tidak Mendukung')
}
}
else {
this.setState({
previewVisible: false,
inputVisible: true,
uploadProgress: false,
percentage: '0'
})
this.setState({ alertMessage: "File extension not allowed", alert: true })
// alert("Unsupported Media Type")
}
} else {
if (acceptedFiles) {
this.setState({
file: acceptedFiles[0],
typeFile: fileType,
nameFile: acceptedFiles[0].name,
sizeFile: (acceptedFiles[0].size / 1000).toFixed(0),
previewVisible: true,
inputVisible: false,
uploadProgress: false,
percentage: '0'
})
this.props.onHandle(acceptedFiles[0])
}
else {
this.setState({
previewVisible: false,
inputVisible: true,
uploadProgress: false,
percentage: '0'
})
this.setState({ alertMessage: "File extension not allowed", alert: true })
// alert("Unsupported Media Type")
}
}
}
onRemove = () => {
if (this.props.intent === "management") {
this.setState({
previewVisible: false,
editVisible: false,
inputVisible: true,
uploadProgress: false,
percentage: '0'
})
this.props.onDelete("delete")
} else {
this.setState({
previewVisible: false,
editVisible: false,
inputVisible: true,
uploadProgress: false,
percentage: '0'
})
}
}
onUpload = () => {
// this.props.onUpload()
var strProps = this.props.acceptedFiles
var strState = this.state.typeFile
// console.log(strProps);
// console.log(strState);
if (strProps.includes(strState)) {
if (this.props.intent === 'management') {
if (this.state.sizeFile < this.state.sizeUpload * 1000) {
this.props.onUpload()
} else {
this.setState({ alertMessage: 'The file is too large. Allowed maximum size is 1MB', alert: true })
// alert('File Tidak Boleh Lebih Dari 1MB')
}
} else {
if (this.state.sizeFile < this.state.sizeUpload * 1000) {
this.props.onUpload()
} else {
this.setState({ alertMessage: 'The file is too large. Allowed maximum size is 1MB', alert: true })
// alert('File Tidak Boleh Lebih Dari 1MB')
}
}
} else {
this.setState({ alertMessage: 'File extension not allowed', alert: true })
// alert('File Tidak Mendukung')
}
}
closeAlert() {
this.setState({ alert: false })
}
render() {
return (
<div>
<Dropzone ref={dropzoneRef} onDrop={this.onDrop}>
{({ getRootProps, getInputProps }) => (
<div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={"warning"}>
{this.state.alertMessage}
</Alert>
</Snackbar>
<div className="upload-file">
{/* label */}
{this.state.inputVisible
? <div {...getRootProps()} className="padding-10px" style={{ cursor: 'pointer' }}>
<input {...getInputProps()} />
<div className="u-p-title">
Drag 'n' drop some files here, or click to select files
</div>
</div>
: null}
{/* edit */}
{this.state.editVisible ?
<div className="u-p-file u-p-preview">
<div className="display-flex-normal">
<div className="width width-35px">
<button
onClick={this.onRemove}
className="btn btn-small-circle btn-black"
type="button">
<img src={Images.close} />
</button>
</div>
<div className="width width-full margin-left-10px">
<div className="txt-site txt-12 txt-white txt-bold">
{this.state.docName}
</div>
<div className="txt-site txt-11 txt-white txt-thin">
{this.state.docSize/1000} KB
</div>
</div>
</div>
</div>
: null}
{/* file */}
{this.state.previewVisible
?
<div className="u-p-file u-p-preview">
<div className="display-flex-normal">
<div className="width width-35px">
<button
onClick={this.state.uploadProgress === true ? null : this.onRemove}
className="btn btn-small-circle btn-black"
type="button">
<img src={Images.close} />
</button>
</div>
<div className="width width-full margin-left-10px">
<div className="txt-site txt-12 txt-white txt-bold">
{this.state.nameFile}
</div>
<div className="txt-site txt-11 txt-white txt-thin">
{this.state.sizeFile} KB
</div>
</div>
{/* this.state.uploadProgress === true
? (
<div className="width width-100px padding-10px txt-site txt-12 txt-white txt-thin">
({this.state.percentage})%
</div>
) : null */}
{this.props.type === 'upload' ?
<div className="width width-155px padding-10px txt-site txt-11 txt-white txt-thin">
Uploading {this.state.percentage}%
</div> : null}
{this.props.disableButtonUpload !== true ? (
<div className="width width-35px">
<button
className="btn btn-small-circle"
type="button"
onClick={this.state.uploadProgress === true ? null : this.onUpload}>
{/*<i className={this.state.iconButtonUpload} />*/}
{this.state.uploadProgress === true
? <i className={'fa fa-1x fa-spinner fa-spin'} /> : this.props.intent === 'management' ? null :
<img src={Images.upload} />}
</button>
</div>
) : null}
</div>
{this.props.type === 'upload' ?
<div className="margin-top-15px">
<LinearProgress variant="determinate" value={this.state.percentage} />
</div> : null}
{/* this.state.uploadProgress === true
? (
<div className="margin-15px">
<LinearProgress variant="determinate" value={this.state.percentage} />
</div>
) : null */}
</div>
: null}
{/* image */}
{/* <div className="u-p-image u-p-preview">
<div className="display-flex-normal">
<div className="width width-full display-flex-normal">
<button className="btn btn-small-circle btn-black">
<i className="fa fa-1x fa-times" />
</button>
</div>
<div className="width width-full display-flex-normal content-right">
<button className="btn btn-small-circle btn-black">
<i className="fa fa-1x fa-upload" />
</button>
</div>
</div>
</div> */}
</div>
</div>
)}
</Dropzone>
</div>
)
}
}
export default Upload