Files
2022-09-20 03:10:03 +03:00

188 lines
6.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Anonim Upload Servisi</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css"
/>
<style>
body {
background-color: #181a1b;
color: #eee;
}
.w-100 {
max-width: 600px;
}
</style>
</head>
<body>
<div class="d-flex flex-column align-items-center mx-3 my-4">
<nav class="w-100">
<div class="d-flex justify-content-between align-items-center">
<h1>Anonim Yükleme Servisi</h1>
</div>
<p class="text-center my-4 fs-4">
Tamamen anonim Dosya Yükleme sistemi Sizin için.
</p>
</nav>
<div class="w-100">
<button class="btn btn-secondary w-100" type="button">
Dosya Yükle
</button>
<input class="d-none" type="file" hidden />
<div class="mt-3 d-none" id="upload-progress">
<p class="mb-0"></p>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-label="Example with label"
style="width: 0%"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
>
0%
</div>
</div>
</div>
<div class="alert alert-danger mt-4 d-none" role="alert">
Yüklenemedi:(
</div>
<div class="input-group mt-3 d-none" id="result">
<button
onclick="copyLink()"
class="btn btn-secondary"
type="button"
id="button-addon1"
>
Kopyala
</button>
<input
type="text"
class="form-control"
placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"
readonly
onfocus="this.select()"
onclick="this.select()"
/>
</div>
</div>
<div class="w-100 mt-3">
<b>2022 | Barış Keser</b>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>
document
.querySelectorAll(".href")
.forEach((i) => (i.innerText = location.href));
document.querySelectorAll("pre code").forEach((el) => {
hljs.highlightElement(el);
});
const button = document.querySelector("button");
const input = document.querySelector("input");
button.addEventListener("click", () => input.click());
input.addEventListener("change", (e) => {
const file = e.target.files[0];
if (!file) return;
document.querySelector("#upload-progress").classList.remove("d-none");
document.querySelector(".alert").classList.add("d-none");
document.querySelector("#result").classList.add("d-none");
document.querySelector("#upload-progress p").innerText = file.name;
const progressBar = document.querySelector(
"#upload-progress .progress-bar"
);
progressBar.innerText = "0%";
progressBar.style.width = "0";
progressBar.setAttribute("aria-valuenow", "0");
const xhr = new XMLHttpRequest();
const path = `${location.origin}/upload?fileName=${encodeURIComponent(
file.name
)}`;
xhr.open("POST", path, true);
xhr.upload.onprogress = (e) => {
const percentage = Math.round((e.loaded / e.total) * 100);
progressBar.innerText = `${percentage}%`;
progressBar.style.width = `${percentage}%`;
progressBar.setAttribute("aria-valuenow", `${percentage}`);
};
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
document.querySelector("#upload-progress").classList.add("d-none");
document.querySelector(".alert").classList.add("d-none");
document.querySelector("#result").classList.remove("d-none");
document.querySelector("#result input").value = JSON.parse(
xhr.responseText
).longURL;
} else {
document.querySelector("#upload-progress").classList.add("d-none");
document.querySelector(".alert").classList.remove("d-none");
console.log(xhr.responseText);
}
input.value = "";
};
xhr.onerror = () => {
document.querySelector("#upload-progress").classList.add("d-none");
document.querySelector(".alert").classList.remove("d-none");
console.log(xhr.responseText);
};
xhr.send(file);
});
const copyToClipboard = (text) => {
try {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
} else {
let textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand("copy") ? res() : rej();
textArea.remove();
});
}
} catch (error) {
console.error(error);
}
};
const copyLink = () => {
copyToClipboard(document.querySelector("#result input").value);
};
</script>
</body>
</html>