transfer.coffee/views/index.ejs
Kumi a53fabdec1
feat: add initial WebTorrent-based file transfer app
- Initialize new Express application for file transfer using WebTorrent.
- Set up routes for generating and retrieving mnemonics and info hashes.
- Implement custom BitTorrent tracker server with WebSockets.
- Add `.gitignore` to exclude `node_modules/`.
- Create `index.ejs` for front-end with file upload and download functionalities.
- Initialize `package.json` and `package-lock.json` with necessary dependencies.
2024-06-14 16:57:55 +02:00

179 lines
5.2 KiB
Text

<!DOCTYPE html>
<html>
<head>
<title>Transfer.coffee</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.section {
margin-bottom: 20px;
}
input[type="file"],
input[type="text"],
input[type="url"] {
width: calc(100% - 22px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.progress {
width: 100%;
background-color: #f3f3f3;
border-radius: 4px;
margin: 10px 0;
}
.progress-bar {
width: 0;
height: 20px;
background-color: #28a745;
border-radius: 4px;
text-align: center;
color: white;
line-height: 20px;
}
.result {
margin: 10px 0;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
</style>
<script src="/js/webtorrent.min.js"></script>
</head>
<body>
<div class="container">
<h1>Transfer.coffee</h1>
<div class="section">
<h2>Upload File</h2>
<input type="file" id="fileInput" />
<button onclick="uploadFile()">Upload</button>
<div class="progress" id="uploadProgress">
<div class="progress-bar" id="uploadProgressBar">0%</div>
</div>
<div class="result" id="uploadResult"></div>
</div>
<div class="section">
<h2>Download File</h2>
<input type="text" id="mnemonicInput" placeholder="Enter mnemonic" />
<button onclick="downloadFile()">Download</button>
<div class="progress" id="downloadProgress">
<div class="progress-bar" id="downloadProgressBar">0%</div>
</div>
<div class="result" id="downloadResult"></div>
</div>
</div>
<script>
const client = new WebTorrent();
const trackerUrl = "<%= trackerUrl %>";
function uploadFile() {
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];
const uploadProgressBar = document.getElementById("uploadProgressBar");
if (!file) {
alert("Please select a file to upload.");
return;
}
const opts = {
announce: [trackerUrl],
};
client.seed(file, opts, (torrent) => {
fetch(`/generate-mnemonic/${torrent.infoHash}`)
.then((response) => response.json())
.then((data) => {
const uploadResult = document.getElementById("uploadResult");
uploadResult.innerHTML = `File uploaded. Share this mnemonic: <strong>${data.mnemonic}</strong>`;
});
torrent.on("upload", () => {
const progress = Math.round(
(torrent.uploaded / torrent.length) * 100
);
uploadProgressBar.style.width = `${progress}%`;
uploadProgressBar.textContent = `${progress}%`;
});
});
}
function downloadFile() {
const mnemonicInput = document.getElementById("mnemonicInput").value;
const downloadProgressBar = document.getElementById(
"downloadProgressBar"
);
if (!mnemonicInput) {
alert("Please enter a mnemonic.");
return;
}
fetch(`/get-infohash/${mnemonicInput}`)
.then((response) => response.json())
.then((data) => {
const torrentId = data.infoHash;
const opts = {
announce: [trackerUrl],
};
client.add(torrentId, opts, (torrent) => {
torrent.files[0].getBlob((err, blob) => {
if (err) {
const downloadResult =
document.getElementById("downloadResult");
downloadResult.innerHTML = `Error: ${err.message}`;
return;
}
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = torrent.files[0].name;
a.click();
const downloadResult =
document.getElementById("downloadResult");
downloadResult.innerHTML = `File downloaded: <strong>${torrent.files[0].name}</strong>`;
});
torrent.on("download", () => {
const progress = Math.round(
(torrent.downloaded / torrent.length) * 100
);
downloadProgressBar.style.width = `${progress}%`;
downloadProgressBar.textContent = `${progress}%`;
});
});
});
}
</script>
</body>
</html>