140 lines
4.9 KiB
JavaScript
140 lines
4.9 KiB
JavaScript
import { InboxOutlined } from '@ant-design/icons';
|
|
import { Upload } from 'antd';
|
|
import axios from 'axios';
|
|
import 'moment/locale/vi';
|
|
import React, { useState } from 'react';
|
|
import { Modal } from 'react-bootstrap';
|
|
import Dropzone from "react-dropzone";
|
|
import LoadingOverlay from 'react-loading-overlay';
|
|
import { PulseLoader } from 'react-spinners';
|
|
import swal from 'sweetalert';
|
|
import { HOST } from '../../config/index';
|
|
|
|
const { Dragger } = Upload;
|
|
|
|
|
|
const ModalUpload = (props) => {
|
|
const { show, onHide } = props;
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleDrop = async acceptedFiles => {
|
|
let formData = new FormData()
|
|
|
|
const fileObjects = acceptedFiles.map(file => {
|
|
formData.append('files', file, file.name)
|
|
})
|
|
|
|
setLoading(true)
|
|
try {
|
|
let result = await axios
|
|
.post(`${HOST}/api/files_face_import`, formData, {
|
|
headers: {
|
|
"X-Requested-With": "XMLHttpRequest",
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
"Authorization": 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJjbGFzc2lmeS9sb2dpbiJdLCJleHAiOjE2NDE5NzQ5NjV9.2F2PAUKjpfjPJKzgvzgCDtyBuTXDRl86EnJJGdYgWTM'
|
|
}
|
|
})
|
|
console.log(result)
|
|
if (result.data.status === 10000) {
|
|
setLoading(false)
|
|
swal({
|
|
text: "Tải ảnh lên thành công",
|
|
icon: "success",
|
|
// buttons: ["Thử lại", "Huỷ"],
|
|
})
|
|
.then(willTry => {
|
|
if (willTry) {
|
|
onHide()
|
|
}
|
|
})
|
|
} else if (result.data.status === 10002) {
|
|
swal("Thất bại", "Lỗi hệ thống!", "error")
|
|
} else if (result.data.status === 10003) {
|
|
swal("Thất bại", "Không có quyền!", "error")
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
swal("Thất bại", "Tải ảnh lên thất bại!", "error")
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<Modal
|
|
{...props}
|
|
animation={false}
|
|
size="md"
|
|
backdrop={loading ? 'static' : true}
|
|
keyboard={false}
|
|
dialogClassName={`${window.innerWidth >= 1920 ? "modal-size-res" : "modal-size"}`}
|
|
aria-labelledby="contained-modal-title-vcenter"
|
|
>
|
|
<LoadingOverlay
|
|
active={loading}
|
|
spinner={<PulseLoader
|
|
sizeUnit={"px"}
|
|
size={12}
|
|
margin={'2px'}
|
|
color={'#36D7B7'}
|
|
loading={true}
|
|
/>}
|
|
styles={{
|
|
overlay: (base) => ({
|
|
...base,
|
|
background: 'rgba(0, 0, 0, 0.58)'
|
|
})
|
|
}}
|
|
|
|
className="col-xl-12 p-0"
|
|
>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title id="contained-modal-title-vcenter">Tải ảnh lên
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
<div className="Container-modal">
|
|
<Dropzone
|
|
onDrop={handleDrop}
|
|
accept="image/*"
|
|
// minSize={1024}
|
|
// maxSize={300000}
|
|
>
|
|
{({
|
|
getRootProps,
|
|
getInputProps,
|
|
isDragActive,
|
|
isDragAccept,
|
|
isDragReject
|
|
}) => {
|
|
const additionalClass = isDragAccept
|
|
? "accept"
|
|
: isDragReject
|
|
? "reject"
|
|
: "";
|
|
|
|
return (
|
|
<div
|
|
{...getRootProps({
|
|
className: `dropzone ${additionalClass}`
|
|
})}
|
|
>
|
|
<input {...getInputProps()} />
|
|
<InboxOutlined style={{ fontSize: "50px" }} />
|
|
<p>Kéo thả thư mục hình ảnh, hoặc chọn ảnh để nhập</p>
|
|
</div>
|
|
);
|
|
}}
|
|
</Dropzone>
|
|
</div>
|
|
|
|
</Modal.Body>
|
|
</LoadingOverlay>
|
|
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default ModalUpload;
|