index.html 2.53 KB
Newer Older
zaver's avatar
zaver committed
1
2
3
<html lang="ru">
<head>
    <title>PDF merger</title>
4
    <meta charset="UTF-8">
5
    <link rel="icon" href="document-icon.png">
zaver's avatar
zaver committed
6
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
zaver's avatar
zaver committed
7
    <link rel="stylesheet" href="css/styles.css">
zaver's avatar
zaver committed
8
9
10
11
12
13
14
15
16
</head>
<body>
<div id="root" @submit.prevent="sendFiles">
    <form id="form">
        <input
                id="file"
                type="file"
                name="documents"
                @change="getFiles"
zaver's avatar
zaver committed
17
                multiple accept="application/pdf"
zaver's avatar
zaver committed
18
        >
zaver's avatar
zaver committed
19

20
21
        <br>
        <input type="radio" id="pdf" value=".pdf" name="doctype" v-model="doctype" checked="checked">
zaver's avatar
zaver committed
22
23
        <label for="pdf">pdf</label>

24
25
26
27
28
        <br>
        <input id="filename" type="text" v-model="filename" name="filename">
        <label for="filename">Название файла</label>

        <br>
29
        <button type="submit">Отправить документы</button>
zaver's avatar
zaver committed
30
    </form>
zaver's avatar
zaver committed
31
32
33
    <div >
        <div v-for="file in respondedFiles">
            <a :href="`${file.serverName}`" :key="file.serverName" target="_blank">{{file.fileName}}</a>
34
35
            <br>
        </div>
36
    </div>
zaver's avatar
zaver committed
37
38
39
40
41
42
</div>

<script>
    new Vue({
        el: "#root",
        data: {
zaver's avatar
zaver committed
43
            files: [],
44
45
            doctype: '.pdf',
            filename: 'FOO',
zaver's avatar
zaver committed
46
47
            respondedFiles: [],
            allFiles: []
zaver's avatar
zaver committed
48
49
50
51
52
        },
        methods:{
            getFiles() {
                this.files = document.querySelector('#file').files
            },
53
            sendFiles() {
zaver's avatar
zaver committed
54
55
                const form = new FormData(document.querySelector('#form'))

56
                fetch('/api/sendFiles', {
zaver's avatar
zaver committed
57
58
59
                    method: "POST",
                    body: form,
                })
zaver's avatar
zaver committed
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
                .then(response=> {
                    if (response.ok) {
                        response.json().then(data => {
                            console.log(data)
                            this.respondedFiles.push(data)
                            console.log(this.respondedFiles)
                        })
                    } else {
                        alert('Файлы не загружены')
                    }
                })
            },
            getAllFiles() {
                fetch('/api/getFiles')
                .then(response=>{
                    if (response.ok) {
                        response.json()
                        .then(data=>{
                            this.allFiles = data
                        })
                    }
                })
zaver's avatar
zaver committed
82
83
84
85
            }
        }
    });
</script>
86

zaver's avatar
zaver committed
87
88
</body>
</html>