1
|
import { message, Button, Modal, Upload } from 'antd';
|
2
|
import { useState } from 'react';
|
3
|
import { InboxOutlined } from '@ant-design/icons';
|
4
|
import 'antd/dist/antd.css';
|
5
|
|
6
|
const { Dragger } = Upload;
|
7
|
|
8
|
/**
|
9
|
* Creates a modal window that loads documents to the app.
|
10
|
* @returns The modal window.
|
11
|
*/
|
12
|
function AddDocument() {
|
13
|
const [visible, setVisible] = useState(true);
|
14
|
|
15
|
/**
|
16
|
* Settings of a file loader.
|
17
|
*/
|
18
|
const props = {
|
19
|
name: 'file',
|
20
|
multiple: true,
|
21
|
directory: true,
|
22
|
/**
|
23
|
@todo: Probably will be needed to change the uploading URL
|
24
|
**/
|
25
|
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
26
|
onChange(info: any) {
|
27
|
const { status } = info.file;
|
28
|
|
29
|
if (status !== 'uploading') {
|
30
|
console.log(info.file, info.fileList);
|
31
|
}
|
32
|
|
33
|
if (status === 'done') {
|
34
|
message.success(`${info.file.name} file uploaded successfully.`);
|
35
|
} else if (status === 'error') {
|
36
|
message.error(`${info.file.name} file upload failed.`);
|
37
|
}
|
38
|
},
|
39
|
onDrop(e: any) {
|
40
|
console.log('Dropped files', e.dataTransfer.files);
|
41
|
},
|
42
|
};
|
43
|
|
44
|
/**
|
45
|
* Handles successfull closing of the modal window.
|
46
|
*/
|
47
|
const handleOk = () => {
|
48
|
setVisible(false);
|
49
|
/**
|
50
|
@todo: Send documents to a server when all files are loaded
|
51
|
**/
|
52
|
console.log('Document is loaded');
|
53
|
};
|
54
|
|
55
|
/**
|
56
|
* Handles cancelling of the model window.
|
57
|
*/
|
58
|
const handleCancel = () => {
|
59
|
setVisible(false);
|
60
|
console.log('Loading of documents is cancelled.');
|
61
|
};
|
62
|
|
63
|
return (
|
64
|
<Modal
|
65
|
visible={visible}
|
66
|
title="Nový dokument"
|
67
|
onOk={handleOk}
|
68
|
onCancel={handleCancel}
|
69
|
footer={[
|
70
|
<Button key="back" onClick={handleCancel}>
|
71
|
Storno
|
72
|
</Button>,
|
73
|
<Button key="submit" type="primary" onClick={handleOk}>
|
74
|
Nahrát
|
75
|
</Button>,
|
76
|
]}
|
77
|
>
|
78
|
<Dragger>
|
79
|
<p className="ant-upload-drag-icon">
|
80
|
<InboxOutlined />
|
81
|
</p>
|
82
|
<p className="ant-upload-text">
|
83
|
Soubory lze nahrát stisknutím nebo přetažením...
|
84
|
</p>
|
85
|
</Dragger>
|
86
|
</Modal>
|
87
|
);
|
88
|
}
|
89
|
|
90
|
export default AddDocument;
|