Hugging Face's logo

Spaces:
eg-art
/
up_fail
Running

App Files Community
DmitrMakeev commited on
Commit
2cf265a
·
verified ·
1 Parent(s): 0e8b5e0

Create up_page_vk.html

Browse files
Files changed (1) hide show
  1. up_page_vk.html +154 -0
up_page_vk.html ADDED
@@ -0,0 +1,154 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>File Upload</title>
7
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ text-align: center;
12
+ background-color: #f0f0f0;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+ h1 {
17
+ background-color: #4CAF50;
18
+ color: white;
19
+ padding: 20px;
20
+ margin: 0;
21
+ border-bottom: 2px solid #388E3C;
22
+ }
23
+ button[type="submit"] {
24
+ color: white;
25
+ background-color: #4CAF50;
26
+ border: none;
27
+ cursor: pointer;
28
+ padding: 10px 20px;
29
+ font-size: 16px;
30
+ border-radius: 5px;
31
+ margin-top: 20px;
32
+ }
33
+ button[type="submit"]:hover {
34
+ background-color: #388E3C;
35
+ }
36
+ #mediaContainer {
37
+ margin-top: 20px;
38
+ display: flex;
39
+ justify-content: center;
40
+ align-items: center;
41
+ flex-direction: column;
42
+ max-width: 100%;
43
+ height: auto;
44
+ }
45
+ #mediaContainer img, #mediaContainer video {
46
+ max-width: 100%;
47
+ height: auto;
48
+ object-fit: contain;
49
+ }
50
+ #imageUrl {
51
+ margin-top: 20px;
52
+ font-size: 16px;
53
+ color: #333;
54
+ cursor: pointer;
55
+ text-decoration: underline;
56
+ }
57
+ #progressBarContainer {
58
+ width: 80%;
59
+ margin: 20px auto;
60
+ background-color: #ddd;
61
+ border-radius: 13px;
62
+ padding: 3px;
63
+ }
64
+ #progressBar {
65
+ width: 0%;
66
+ height: 20px;
67
+ background-color: #4CAF50;
68
+ border-radius: 10px;
69
+ text-align: center;
70
+ line-height: 20px;
71
+ color: white;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body>
76
+ <div id="mediaContainer">
77
+ <!-- Media content will be displayed here -->
78
+ </div>
79
+ <div id="progressBarContainer">
80
+ <div id="progressBar">0%</div>
81
+ </div>
82
+ <div id="imageUrl" onclick="copyToClipboard(this)">Кликните после загрузки, для получения ссылки на сохранённый файл.</div>
83
+ <form id="uploadForm" enctype="multipart/form-data" method="post" action="/up_page">
84
+ <input type="file" name="file" accept=".html">
85
+ <input type="text" name="filename" placeholder="имя файла(маршрут)">
86
+ <button type="submit">Загрузить</button>
87
+ </form>
88
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
89
+ <script>
90
+ document.getElementById('uploadForm').addEventListener('submit', function(event) {
91
+ event.preventDefault();
92
+ var formData = new FormData(this);
93
+ // Получаем ключ из локального хранилища
94
+ const apiKeySys = localStorage.getItem('api_key_sys');
95
+ if (!apiKeySys) {
96
+ Toastify({
97
+ text: "Ключ авторизации не найден",
98
+ duration: 3000,
99
+ gravity: "top",
100
+ position: "center",
101
+ backgroundColor: "#FF5733",
102
+ }).showToast();
103
+ return;
104
+ }
105
+ // Добавляем ключ в FormData
106
+ formData.append('api_key_sys', apiKeySys);
107
+ var request = new XMLHttpRequest();
108
+ request.open('POST', '/up_page');
109
+ request.upload.addEventListener('progress', function(event) {
110
+ if (event.lengthComputable) {
111
+ var percentComplete = (event.loaded / event.total) * 100;
112
+ document.getElementById('progressBar').style.width = percentComplete + '%';
113
+ document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
114
+ }
115
+ }, false);
116
+ request.addEventListener('load', function(event) {
117
+ var response = JSON.parse(event.target.responseText);
118
+ if (response.error) {
119
+ Toastify({
120
+ text: "Ошибка: " + response.error,
121
+ duration: 3000,
122
+ gravity: "top",
123
+ position: "center",
124
+ backgroundColor: "#FF5733",
125
+ }).showToast();
126
+ } else {
127
+ var fullUrl = response.url;
128
+ document.getElementById('imageUrl').innerText = fullUrl;
129
+ document.getElementById('progressBar').style.width = '0%';
130
+ document.getElementById('progressBar').innerText = '0%';
131
+ // Сохранение ссылки в локальное хранилище
132
+ localStorage.setItem('fileUrl', fullUrl);
133
+ }
134
+ }, false);
135
+ request.send(formData);
136
+ });
137
+ function copyToClipboard(element) {
138
+ var tempInput = document.createElement("input");
139
+ tempInput.value = element.innerText;
140
+ document.body.appendChild(tempInput);
141
+ tempInput.select();
142
+ document.execCommand("copy");
143
+ document.body.removeChild(tempInput);
144
+ Toastify({
145
+ text: "Ссылка скопирована в буфер обмена",
146
+ duration: 3000,
147
+ gravity: "top",
148
+ position: "center",
149
+ backgroundColor: "#4CAF50",
150
+ }).showToast();
151
+ }
152
+ </script>
153
+ </body>
154
+ </html>