File size: 5,899 Bytes
0657260
3293cdd
 
 
 
a2fc930
 
3293cdd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a2fc930
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fa37d06
 
a2fc930
 
 
 
51fa69d
a2fc930
 
 
 
3293cdd
a2fc930
3293cdd
a2fc930
 
 
 
3293cdd
d4ff5bb
 
 
3774d8e
a2fc930
 
3774d8e
a2fc930
d4ff5bb
a2fc930
d4ff5bb
a2fc930
d4ff5bb
a2fc930
d4ff5bb
 
3293cdd
 
 
54b68ae
a2fc930
 
fa37d06
481f1de
a2fc930
481f1de
54b68ae
a2fc930
 
54b68ae
a2fc930
 
3293cdd
a2fc930
 
 
 
 
 
 
 
 
 
3774d8e
a2fc930
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fa37d06
 
a2fc930
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3293cdd
 
 
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #388E3C;
        }
        button[type="submit"] {
            color: white;
            background-color: #4CAF50;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }
        button[type="submit"]:hover {
            background-color: #388E3C;
        }
        #mediaContainer {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            max-width: 100%;
            height: auto;
        }
        #mediaContainer img, #mediaContainer video {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }
        #imageUrl {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            text-decoration: underline;
        }
        #progressBarContainer {
            width: 80%;
            margin: 20px auto;
            background-color: #ddd;
            border-radius: 13px;
            padding: 3px;
        }
        #progressBar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Загрузка файлов</h1>
    <div id="mediaContainer">
        <!-- Media content will be displayed here -->
    </div>
    <div id="progressBarContainer">
        <div id="progressBar">0%</div>
    </div>
    <div id="imageUrl" onclick="copyToClipboard(this)">Кликните что бы сохранить</div>
    <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
        <input type="file" name="file">
        <button type="submit">Загрузить</button>
    </form>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            var request = new XMLHttpRequest();
            request.open('POST', '/upload');
            request.upload.addEventListener('progress', function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    document.getElementById('progressBar').style.width = percentComplete + '%';
                    document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
                }
            }, false);
            request.addEventListener('load', function(event) {
                var response = event.target.responseText;
                var fullUrl = response.split('saved to ')[1];
                var filename = fullUrl.split('/').pop();
                document.getElementById('imageUrl').innerText = fullUrl;
                displayMedia(fullUrl);
                document.getElementById('progressBar').style.width = '0%';
                document.getElementById('progressBar').innerText = '0%';
                // Сохранение имени файла и ссылки в локальное хранилище
                localStorage.setItem('filename', filename);
                localStorage.setItem('fileUrl', fullUrl);
            }, false);
            request.send(formData);
        });
        function displayMedia(url) {
            var mediaContainer = document.getElementById('mediaContainer');
            mediaContainer.innerHTML = '';
            var extension = url.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
                var img = document.createElement('img');
                img.src = url;
                mediaContainer.appendChild(img);
            } else if (['mp4', 'webm', 'ogg'].includes(extension)) {
                var video = document.createElement('video');
                video.src = url;
                video.controls = true;
                mediaContainer.appendChild(video);
            } else if (['mp3', 'wav', 'ogg'].includes(extension)) {
                var audio = document.createElement('audio');
                audio.src = url;
                audio.controls = true;
                mediaContainer.appendChild(audio);
            } else {
                mediaContainer.innerText = 'Unsupported file type';
            }
        }
        function copyToClipboard(element) {
            var tempInput = document.createElement("input");
            tempInput.value = element.innerText;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
            Toastify({
                text: "URL copied to clipboard",
                duration: 3000,
                gravity: "top",
                position: "center",
                backgroundColor: "#4CAF50",
            }).showToast();
        }
    </script>
</body>
</html>