PrivateCoffee/transfer.coffee
4
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
transfer.coffee/views/index.ejs

182 lines
5.3 KiB
Text
Raw Normal View History

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 14:57:55 +00:00
<!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>
feat: add minified WebTorrent script Add a new minified WebTorrent script to improve page load times. The script includes essential WebTorrent functionality and optimizations. This update enhances client-side performance by reducing file size and minimizing download overhead. No breaking changes introduced.
2024-06-14 15:43:31 +00:00
<script src="/dist/js/webtorrent.min.js"></script>
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 14:57:55 +00:00
</head>
<body>
<div class="container">
<h1>Transfer.coffee</h1>
<div class="section">
feat(ui): update file transfer terminology Changed 'Upload File' to 'Share File' to better reflect the functionality and improve user guidance. Added explanatory note informing users that the file will remain available as long as the page is open.
2024-06-14 15:34:36 +00:00
<h2>Share File</h2>
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 14:57:55 +00:00
<input type="file" id="fileInput" />
feat(ui): update file transfer terminology Changed 'Upload File' to 'Share File' to better reflect the functionality and improve user guidance. Added explanatory note informing users that the file will remain available as long as the page is open.
2024-06-14 15:34:36 +00:00
<button onclick="uploadFile()">Share</button>
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 14:57:55 +00:00
<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");
feat(ui): update file transfer terminology Changed 'Upload File' to 'Share File' to better reflect the functionality and improve user guidance. Added explanatory note informing users that the file will remain available as long as the page is open.
2024-06-14 15:34:36 +00:00
uploadResult.innerHTML = `Started sharing file. Share this mnemonic: <strong>${data.mnemonic}</strong>
<br>Note that the file will be available for download as long as this page is open.
`;
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 14:57:55 +00:00
});
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>
Reference in a new issue Copy permalink