Upload.js 9.19 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
import React, { Component, createRef } from "react"
import Dropzone from 'react-dropzone'
import LinearProgress from '@material-ui/core/LinearProgress'
import Images from "../assets/Images"

const dropzoneRef = createRef()

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'
        }
    }

    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) {
31
                this.setState({ percentage: prevs.percentage })
32 33 34 35
            }
        }
        if (prevs.result === 'success' || prevs.result === 'error') {
            if (this.state.uploadProgress === true) {
36
                this.setState({ uploadProgress: false, percentage: '100', iconButtonUpload: 'fa fa-1x fa-check' })
37 38 39 40 41 42 43 44 45
            }
        }
    }

    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])
46 47
        console.log(acceptedFiles);
        if (acceptedFiles) {
48 49 50 51
            this.setState({
                file: acceptedFiles[0],
                typeFile: fileType,
                nameFile: acceptedFiles[0].name,
52
                sizeFile: (acceptedFiles[0].size / 1000).toFixed(0),
53 54 55 56 57 58
                previewVisible: true,
                inputVisible: false,
                uploadProgress: false,
                percentage: '0'
            })
            this.props.onHandle(acceptedFiles[0])
59 60
        }
        else {
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
            this.setState({
                previewVisible: false,
                inputVisible: true,
                uploadProgress: false,
                percentage: '0'
            })
            alert("Unsupported Media Type")
        }
    }

    onRemove = () => {
        this.setState({
            previewVisible: false,
            inputVisible: true,
            uploadProgress: false,
            percentage: '0'
        })
    }

    onUpload = () => {
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
        // 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.state.sizeFile < 1000000) {
                this.props.onUpload()
            } else {
                alert('File Tidak Boleh Lebih Dari 1MB')
            }
        } else {
            alert('File Tidak Mendukung')
        }

97 98 99
    }

    render() {
100
        return (
101 102
            <div>
                <Dropzone ref={dropzoneRef} onDrop={this.onDrop}>
103
                    {({ getRootProps, getInputProps }) => (
104 105 106 107
                        <div>
                            <div className="upload-file">

                                {/* label */}
108 109 110 111 112
                                {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
113
                                    </div>
114 115
                                    </div>
                                    : null}
116 117

                                {/* file */}
118 119 120 121 122 123 124 125 126
                                {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">
Deni Rinaldi's avatar
Deni Rinaldi committed
127
                                                    <img src={Images.close} />
128
                                                </button>
129
                                            </div>
130 131 132 133 134 135
                                            <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
136
                                            </div>
137 138
                                            </div>
                                            {/* this.state.uploadProgress === true
139 140 141 142 143
                                        ? (
                                            <div className="width width-100px padding-10px txt-site txt-12 txt-white txt-thin">
                                                ({this.state.percentage})%
                                            </div>
                                        ) : null  */}
144 145 146 147
                                            {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}
148

149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
                                            {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'} /> :
                                                            <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
168 169 170 171 172
                                    ? (
                                        <div className="margin-15px">
                                            <LinearProgress variant="determinate" value={this.state.percentage} />
                                        </div>
                                    ) : null */}
173 174
                                    </div>
                                    : null}
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201

                                {/* 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