<!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>
<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">
<input type="file" name="file" accept=".html">
<input type="text" name="filename" placeholder="имя файла(маршрут)">
<select name="route" id="routeSelect">
<option value="/up_page">Загрузка на /up_page</option>
<option value="/up_page_vk">Загрузка на /up_page_vk</option>
</select>
<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);
// Получаем ключ из локального хранилища
const apiKeySys = localStorage.getItem('api_key_sys');
if (!apiKeySys) {
Toastify({
text: "Ключ авторизации не найден",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#FF5733",
}).showToast();
return;
}
// Добавляем ключ в FormData
formData.append('api_key_sys', apiKeySys);
// Получаем выбранный маршрут
const route = document.getElementById('routeSelect').value;
var request = new XMLHttpRequest();
request.open('POST', route);
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 = JSON.parse(event.target.responseText);
if (response.error) {
Toastify({
text: "Ошибка: " + response.error,
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#FF5733",
}).showToast();
} else {
var fullUrl = response.url;
document.getElementById('imageUrl').innerText = fullUrl;
document.getElementById('progressBar').style.width = '0%';
document.getElementById('progressBar').innerText = '0%';
// Сохранение ссылки в локальное хранилище
localStorage.setItem('fileUrl', fullUrl);
}
}, false);
request.send(formData);
});
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: "Ссылка скопирована в буфер обмена",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#4CAF50",
}).showToast();
}
</script>
</body>
</html>