feat: add statistics API and dashboard for asset metrics
All checks were successful
Rust CI / build-test (push) Successful in 1m22s

- Implemented `/api/stats` endpoint to return JSON metrics including active assets, total uploads, storage usage, and recent activity.
- Created `stats.html` page to display real-time statistics with auto-refresh functionality.
- Enhanced asset logging to include uploader IP and detailed event information for uploads and deletions.
- Updated asset model to store uploader IP for audit purposes.
- Improved logging functionality to ensure log directory exists before writing.
- Refactored asset creation and management to support new features and logging.
This commit is contained in:
2026-01-09 20:59:24 +01:00
parent 954a5be8cb
commit d6c465466a
10 changed files with 1036 additions and 305 deletions

16
.github/copilot-instructions.md vendored Normal file
View File

@@ -0,0 +1,16 @@
# Black Hole Share AI Guide
- Purpose: lightweight Actix-Web service for ephemeral image/text sharing; uploads saved as JSON files on disk and purged after their TTL.
- **Base directory is `data/`**: the server uses relative paths `data/html/`, `data/logs/`, `data/storage/`. Run from repo root locally; Docker mounts `./data:/data`.
- HTTP entrypoint and routing live in [src/main.rs](../src/main.rs): `/` serves `index.html`, `/bhs/{id}` serves `view.html`, `/api/upload` and `/api/content/{id}` registered from the API module, catch-all serves other static files under `html/` (list cached at startup via `STATIC_PAGES`).
- Request JSON bodies capped at ~3 MiB via `web::JsonConfig`. Background cleanup task runs every 60s to delete expired assets in `storage/`.
- Upload API in [src/api.rs](../src/api.rs): accepts JSON `{ duration: minutes, content_type, content }`; `text/plain` content is stored raw bytes, other types are base64-decoded. On success returns `{ "link": "/bhs/<uuid>" }`.
- Fetch API in [src/api.rs](../src/api.rs): loads `{id}` from `storage/`, rejects missing or expired assets, responds with original MIME and bytes.
- Asset model and persistence in [src/data_mgt.rs](../src/data_mgt.rs): assets serialized as JSON files named by UUID, with `expires_at` computed from `share_duration` (minutes). Cleanup logs removals to stdout.
- Logging helper in [src/logs.rs](../src/logs.rs): appends access lines with timing, IPs, scheme, UA to `logs/access.log`; runs for every handled request.
- Frontend upload page [data/html/index.html](../data/html/index.html): JS handles drag/drop, paste, or file picker; converts images to base64 or keeps text, POSTs to `/api/upload`, shows returned link and copies to clipboard. Styling/theme in [data/html/style.css](../data/html/style.css).
- Viewer page [data/html/view.html](../data/html/view.html): fetches `/api/content/{id}`, renders images with zoom overlay or text with zoomable modal; shows error when content missing/expired.
- Environment: `BIND_ADDR` and `BIND_PORT` (defaults 0.0.0.0:8080) are read via `LazyLock` on startup; `tokio` multi-thread runtime used.
- Build/dev: `cargo run --release` from repo root (ensure `data/` exists with `html/`, `logs/`, `storage/`), or use Dockerfile (Arch base + rustup build) and docker-compose (Traefik labels, port 8080→80, volume `./data:/data`).
- No test suite present; verify changes by running the server and exercising `/api/upload` and `/api/content/{id}` via the provided UI or curl.
- When adding features, keep payload sizes small or adjust the JSON limit in [src/main.rs](../src/main.rs); ensure new routes log via `log_to_file` for observability; clean up expired artifacts consistently with `clear_assets()` patterns.

40
CHANGELOG.md Normal file
View File

@@ -0,0 +1,40 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [0.1.0] - 2026-01-09
### Added
- **Statistics Dashboard** (`/stats.html`) with real-time metrics:
- Active assets count
- Total uploads and deletions
- Storage usage
- Image vs text breakdown
- Average server response time
- Total request count
- Recent activity feed (last 20 events)
- Auto-refresh every 30 seconds
- **Statistics API** (`GET /api/stats`) returning JSON metrics
- **Enhanced logging** for asset events:
- Upload events with uploader IP, MIME type, size, duration, timestamps
- Delete events with full asset metadata
- Request timing (`dur_ms`) in access logs
- **Uploader IP tracking** stored with each asset for audit purposes
- Stats link in index page footer
- Ephemeral image and text sharing with configurable TTL (1-60 minutes)
- Drag/drop, paste, and file picker upload support
- Base64 encoding for images, raw text for plain text
- UUID-based asset storage as JSON files
- Background cleanup task (every 60 seconds)
- Dark theme UI with zoom overlay
- View page for shared content
- Access logging with timing, IPs, and user agent
- Docker and docker-compose support with Traefik labels
- Environment variables for bind address and port
- Access logging with timing, IPs, and user agent
- Docker and docker-compose support with Traefik labels
- Environment variables for bind address and port

21
LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2026 Black Hole Share Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

127
README.md
View File

@@ -0,0 +1,127 @@
# Black Hole Share
A lightweight, ephemeral file sharing service built with Rust and Actix-Web. Upload images or text with a configurable TTL (1-60 minutes) and share via a unique link. Content is automatically purged after expiration.
## Features
- **Ephemeral sharing** uploads auto-delete after the specified duration
- **Image & text support** drag/drop, paste, or file picker for images; paste text directly
- **Zero database** assets stored as JSON files on disk
- **Dark theme UI** clean, responsive interface with zoom overlay
- **Statistics dashboard** real-time stats at `/stats.html` (active assets, uploads, response times)
- **Access logging** request and asset events logged to `data/logs/access.log` with IP, timing, and metadata
## Quick Start
### Local Development
```bash
# Run from repo root (paths resolve to data/html/, data/logs/, data/storage/)
cargo run --release
```
Server starts at `http://0.0.0.0:8080` by default.
> **Note:** All paths are relative to the repo root: `data/html/`, `data/logs/`, `data/storage/`.
### Docker
```bash
docker-compose up --build
```
Exposes port `8080` mapped to container port `80`. Volume mounts `./data:/data`.
## Configuration
| Environment Variable | Default | Description |
| -------------------- | --------- | --------------- |
| `BIND_ADDR` | `0.0.0.0` | Address to bind |
| `BIND_PORT` | `8080` | Port to bind |
## API
### Upload
```http
POST /api/upload
Content-Type: application/json
{
"duration": 5,
"content_type": "text/plain",
"content": "Hello, world!"
}
```
- `duration` TTL in minutes (1-60)
- `content_type` MIME type (`text/plain` or `image/*`)
- `content` raw text or base64-encoded image data
**Response:**
```json
{ "link": "/bhs/550e8400-e29b-41d4-a716-446655440000" }
```
### Fetch
```http
GET /api/content/{id}
```
Returns the original content with appropriate MIME type, or `404` if expired/missing.
### Statistics
```http
GET /api/stats
```
**Response:**
```json
{
"active_assets": 5,
"total_uploads": 42,
"total_deleted": 37,
"storage_bytes": 1048576,
"image_count": 3,
"text_count": 2,
"avg_response_ms": 0.85,
"total_requests": 150,
"recent_activity": [...]
}
```
## Project Structure
```
├── src/
│ ├── main.rs # HTTP server, routing, background cleanup
│ ├── api.rs # Upload/fetch endpoints
│ ├── data_mgt.rs # Asset model, persistence, expiration
│ └── logs.rs # Request and asset event logging
├── data/
│ ├── html/ # Frontend (index.html, view.html, stats.html, style.css)
│ ├── logs/ # Access logs
│ └── storage/ # Stored assets (auto-created)
├── Dockerfile
├── docker-compose.yaml
└── Cargo.toml
```
## Runtime Layout
The server uses paths relative to the repo root under `data/`:
- `data/html/` frontend assets (index.html, view.html, style.css)
- `data/logs/` access logs
- `data/storage/` uploaded assets (auto-created)
- **Local dev:** Run from repo root with `cargo run --release`
- **Docker:** Volume mounts `./data:/data`, container WORKDIR is `/`
## License
MIT

View File

@@ -1,341 +1,388 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Upload</title>
<link rel="stylesheet" href="style.css" />
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Black Hole Share</h1>
<body>
<h1>Black Hole Share</h1>
<div class="upload-container">
<div class="upload-area">
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<div id="uploadZone" class="upload-zone">
<p>Click to select file, paste image, text data, or drag & drop</p>
<div class="upload-container">
<div class="upload-area">
<input
type="file"
id="fileInput"
accept="image/*"
style="display: none"
/>
<div id="uploadZone" class="upload-zone">
<p>Click to select file, paste image, text data, or drag & drop</p>
</div>
</div>
</div>
</div>
<div class="duration-container">
<label for="durationSlider">Duration: <span id="durationValue">5</span> min</label>
<input type="range" id="durationSlider" min="1" max="60" value="5" step="1">
<div class="button-row">
<button id="resetBtn" class="reset-btn" style="display: none;">Reset</button>
<button id="uploadBtn" class="upload-btn" style="display: none;">Upload</button>
<div class="duration-container">
<label for="durationSlider"
>Duration: <span id="durationValue">5</span> min</label
>
<input
type="range"
id="durationSlider"
min="1"
max="60"
value="5"
step="1"
/>
<div class="button-row">
<button id="resetBtn" class="reset-btn" style="display: none">
Reset
</button>
<button id="uploadBtn" class="upload-btn" style="display: none">
Upload
</button>
</div>
<div id="linkContainer" class="link-container" style="display: none">
<p>Link:</p>
<a id="uploadedLink" href="#" target="_blank"></a>
<p
id="clipboardMessage"
class="clipboard-message"
style="display: none"
></p>
</div>
</div>
<div id="linkContainer" class="link-container" style="display: none;">
<p>Link:</p>
<a id="uploadedLink" href="#" target="_blank"></a>
<p id="clipboardMessage" class="clipboard-message" style="display: none;"></p>
</div>
</div>
<footer class="powered-by">
<span>Powered by: <img src="logo.png" alt="ICSBox" class="footer-logo"></span>
</footer>
<footer class="powered-by" style="display: flex; align-items: center">
<span style="flex: 1"></span>
<span
>Powered by: <img src="logo.png" alt="ICSBox" class="footer-logo"
/></span>
<span style="flex: 1; text-align: right">
<a
href="/stats.html"
style="
color: var(--text-secondary);
font-size: 0.8em;
text-decoration: none;
"
>📊 Stats</a
>
</span>
</footer>
<!-- Zoom overlay -->
<div id="zoomOverlay" class="zoom-overlay" style="display: none;">
</div>
<!-- Zoom overlay -->
<div id="zoomOverlay" class="zoom-overlay" style="display: none"></div>
<script>
let currentContentData = null;
const fileInput = document.getElementById('fileInput');
const uploadZone = document.getElementById('uploadZone');
const uploadContainer = document.querySelector('.upload-container');
const durationSlider = document.getElementById('durationSlider');
const durationValue = document.getElementById('durationValue');
const uploadBtn = document.getElementById('uploadBtn');
const resetBtn = document.getElementById('resetBtn');
const zoomOverlay = document.getElementById('zoomOverlay');
const linkContainer = document.getElementById('linkContainer');
const uploadedLink = document.getElementById('uploadedLink');
const clipboardMessage = document.getElementById('clipboardMessage');
<script>
let currentContentData = null;
const fileInput = document.getElementById("fileInput");
const uploadZone = document.getElementById("uploadZone");
const uploadContainer = document.querySelector(".upload-container");
const durationSlider = document.getElementById("durationSlider");
const durationValue = document.getElementById("durationValue");
const uploadBtn = document.getElementById("uploadBtn");
const resetBtn = document.getElementById("resetBtn");
const zoomOverlay = document.getElementById("zoomOverlay");
const linkContainer = document.getElementById("linkContainer");
const uploadedLink = document.getElementById("uploadedLink");
const clipboardMessage = document.getElementById("clipboardMessage");
// Update duration display
durationSlider.addEventListener('input', function () {
durationValue.textContent = this.value;
});
// Update duration display
durationSlider.addEventListener("input", function () {
durationValue.textContent = this.value;
});
uploadBtn.addEventListener('click', async () => {
const duration = durationSlider.value;
const isText = uploadZone.querySelector('.text-content') !== null;
const mimeType = isText ? 'text/plain' : 'image/png';
const contentData = currentContentData;
uploadBtn.addEventListener("click", async () => {
const duration = durationSlider.value;
const isText = uploadZone.querySelector(".text-content") !== null;
const mimeType = isText ? "text/plain" : "image/png";
const contentData = currentContentData;
if (!contentData) {
console.log('❌ No content to upload!');
return;
}
sendUpload(duration, mimeType, contentData);
});
async function sendUpload(duration, mimeType, contentData) {
const isText = mimeType === 'text/plain';
let content = contentData;
// For images, remove data URL prefix to send only base64 string
if (!isText && contentData.includes('base64,')) {
content = contentData.split('base64,')[1];
}
const payload = {
duration: parseInt(duration),
content_type: mimeType,
content: content
};
try {
const response = await fetch('/api/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload)
});
const result = await response.json();
console.log(`✅ Upload received!\n${JSON.stringify(result, null, 2)}`);
// Hide duration controls and buttons
document.querySelector('label[for="durationSlider"]').style.display = 'none';
durationSlider.style.display = 'none';
uploadBtn.style.display = 'none';
resetBtn.style.display = 'none';
// Show link
const fullLink = window.location.origin + result.link;
uploadedLink.href = fullLink;
uploadedLink.textContent = fullLink;
linkContainer.style.display = 'block';
// Copy to clipboard
try {
await navigator.clipboard.writeText(fullLink);
clipboardMessage.textContent = '✓ Copied to clipboard!';
clipboardMessage.style.color = 'var(--accent-green)';
clipboardMessage.style.cursor = 'default';
clipboardMessage.style.display = 'block';
clipboardMessage.onclick = null;
} catch (error) {
clipboardMessage.textContent = '⚠ Click here to copy link';
clipboardMessage.style.color = 'var(--accent-cyan)';
clipboardMessage.style.cursor = 'pointer';
clipboardMessage.style.display = 'block';
clipboardMessage.onclick = function () {
const textArea = document.createElement('textarea');
textArea.value = fullLink;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
clipboardMessage.textContent = '✓ Copied to clipboard!';
clipboardMessage.style.color = 'var(--accent-green)';
clipboardMessage.style.cursor = 'default';
clipboardMessage.onclick = null;
} catch (e) {
clipboardMessage.textContent = '✗ Copy failed';
clipboardMessage.style.color = '#ff6666';
}
document.body.removeChild(textArea);
};
if (!contentData) {
console.log("❌ No content to upload!");
return;
}
} catch (error) {
console.log(`❌ Error: ${error.message}`);
}
}
sendUpload(duration, mimeType, contentData);
});
async function sendUpload(duration, mimeType, contentData) {
const isText = mimeType === "text/plain";
let content = contentData;
// Reset to initial state
resetBtn.addEventListener('click', function () {
currentContentData = null;
uploadZone.innerHTML = '<p>Click to select file, paste image data, or drag & drop</p>';
uploadContainer.style.height = '180px';
uploadContainer.style.pointerEvents = '';
uploadContainer.style.overflow = '';
uploadZone.style.pointerEvents = '';
uploadZone.style.alignItems = '';
uploadZone.style.justifyContent = '';
uploadZone.style.padding = '';
fileInput.value = '';
durationSlider.value = '5';
durationValue.textContent = '5';
document.querySelector('label[for="durationSlider"]').style.display = '';
durationSlider.style.display = '';
uploadBtn.style.display = 'none';
resetBtn.style.display = 'none';
linkContainer.style.display = 'none';
clipboardMessage.style.display = 'none';
uploadZone.focus();
});
// For images, remove data URL prefix to send only base64 string
if (!isText && contentData.includes("base64,")) {
content = contentData.split("base64,")[1];
}
// Display and scale image or text content maintaining aspect ratio
function displayContent(content, isText = false) {
currentContentData = content;
const payload = {
duration: parseInt(duration),
content_type: mimeType,
content: content,
};
if (isText) {
// Display text content - ZOOM ENABLED
uploadZone.innerHTML = `<div class="text-content" style="cursor: zoom-in;">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`;
uploadContainer.style.height = '500px';
uploadContainer.style.overflow = 'hidden';
uploadZone.style.pointerEvents = 'auto';
uploadZone.style.alignItems = 'stretch';
uploadZone.style.justifyContent = 'stretch';
uploadZone.style.padding = '0';
uploadBtn.style.display = 'block';
resetBtn.style.display = 'block';
// ZOOM FOR TEXT
const textContent = uploadZone.querySelector('.text-content');
textContent.addEventListener('click', function (e) {
e.stopPropagation();
showZoom(content, true);
});
} else {
// Display image
const img = new Image();
img.onload = function () {
const maxWidth = 620;
const maxHeight = 800;
const scale = Math.min(maxWidth / img.width, maxHeight / img.height, 1);
const displayHeight = Math.floor(img.height * scale);
const displayWidth = Math.floor(img.width * scale);
uploadZone.innerHTML = `<img src="${content}" alt="Uploaded Image" style="width: ${displayWidth}px; height: ${displayHeight}px; object-fit: contain; cursor: zoom-in;">`;
uploadContainer.style.height = `${displayHeight + 20}px`;
uploadContainer.style.pointerEvents = 'none';
uploadZone.style.pointerEvents = 'auto';
uploadBtn.style.display = 'block';
resetBtn.style.display = 'block';
const uploadedImg = uploadZone.querySelector('img');
uploadedImg.addEventListener('click', function (e) {
e.stopPropagation();
showZoom(content, false);
try {
const response = await fetch("/api/upload", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
});
};
img.src = content;
const result = await response.json();
console.log(
`✅ Upload received!\n${JSON.stringify(result, null, 2)}`
);
// Hide duration controls and buttons
document.querySelector('label[for="durationSlider"]').style.display =
"none";
durationSlider.style.display = "none";
uploadBtn.style.display = "none";
resetBtn.style.display = "none";
// Show link
const fullLink = window.location.origin + result.link;
uploadedLink.href = fullLink;
uploadedLink.textContent = fullLink;
linkContainer.style.display = "block";
// Copy to clipboard
try {
await navigator.clipboard.writeText(fullLink);
clipboardMessage.textContent = "✓ Copied to clipboard!";
clipboardMessage.style.color = "var(--accent-green)";
clipboardMessage.style.cursor = "default";
clipboardMessage.style.display = "block";
clipboardMessage.onclick = null;
} catch (error) {
clipboardMessage.textContent = "⚠ Click here to copy link";
clipboardMessage.style.color = "var(--accent-cyan)";
clipboardMessage.style.cursor = "pointer";
clipboardMessage.style.display = "block";
clipboardMessage.onclick = function () {
const textArea = document.createElement("textarea");
textArea.value = fullLink;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
clipboardMessage.textContent = "✓ Copied to clipboard!";
clipboardMessage.style.color = "var(--accent-green)";
clipboardMessage.style.cursor = "default";
clipboardMessage.onclick = null;
} catch (e) {
clipboardMessage.textContent = "✗ Copy failed";
clipboardMessage.style.color = "#ff6666";
}
document.body.removeChild(textArea);
};
}
} catch (error) {
console.log(`❌ Error: ${error.message}`);
}
}
}
// Open file picker on container click (ONLY IF EMPTY)
uploadContainer.addEventListener('click', function (e) {
if (uploadContainer.style.pointerEvents !== 'none' && !uploadZone.querySelector('.text-content') && !uploadZone.querySelector('img')) {
fileInput.click();
// Reset to initial state
resetBtn.addEventListener("click", function () {
currentContentData = null;
uploadZone.innerHTML =
"<p>Click to select file, paste image data, or drag & drop</p>";
uploadContainer.style.height = "180px";
uploadContainer.style.pointerEvents = "";
uploadContainer.style.overflow = "";
uploadZone.style.pointerEvents = "";
uploadZone.style.alignItems = "";
uploadZone.style.justifyContent = "";
uploadZone.style.padding = "";
fileInput.value = "";
durationSlider.value = "5";
durationValue.textContent = "5";
document.querySelector('label[for="durationSlider"]').style.display =
"";
durationSlider.style.display = "";
uploadBtn.style.display = "none";
resetBtn.style.display = "none";
linkContainer.style.display = "none";
clipboardMessage.style.display = "none";
uploadZone.focus();
});
// Display and scale image or text content maintaining aspect ratio
function displayContent(content, isText = false) {
currentContentData = content;
if (isText) {
// Display text content - ZOOM ENABLED
uploadZone.innerHTML = `<div class="text-content" style="cursor: zoom-in;">${content
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")}</div>`;
uploadContainer.style.height = "500px";
uploadContainer.style.overflow = "hidden";
uploadZone.style.pointerEvents = "auto";
uploadZone.style.alignItems = "stretch";
uploadZone.style.justifyContent = "stretch";
uploadZone.style.padding = "0";
uploadBtn.style.display = "block";
resetBtn.style.display = "block";
// ZOOM FOR TEXT
const textContent = uploadZone.querySelector(".text-content");
textContent.addEventListener("click", function (e) {
e.stopPropagation();
showZoom(content, true);
});
} else {
// Display image
const img = new Image();
img.onload = function () {
const maxWidth = 620;
const maxHeight = 800;
const scale = Math.min(
maxWidth / img.width,
maxHeight / img.height,
1
);
const displayHeight = Math.floor(img.height * scale);
const displayWidth = Math.floor(img.width * scale);
uploadZone.innerHTML = `<img src="${content}" alt="Uploaded Image" style="width: ${displayWidth}px; height: ${displayHeight}px; object-fit: contain; cursor: zoom-in;">`;
uploadContainer.style.height = `${displayHeight + 20}px`;
uploadContainer.style.pointerEvents = "none";
uploadZone.style.pointerEvents = "auto";
uploadBtn.style.display = "block";
resetBtn.style.display = "block";
const uploadedImg = uploadZone.querySelector("img");
uploadedImg.addEventListener("click", function (e) {
e.stopPropagation();
showZoom(content, false);
});
};
img.src = content;
}
}
});
fileInput.addEventListener('change', function (e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
displayContent(event.target.result);
};
reader.readAsDataURL(file);
}
});
// Open file picker on container click (ONLY IF EMPTY)
uploadContainer.addEventListener("click", function (e) {
if (
uploadContainer.style.pointerEvents !== "none" &&
!uploadZone.querySelector(".text-content") &&
!uploadZone.querySelector("img")
) {
fileInput.click();
}
});
// Handle paste from clipboard
uploadZone.addEventListener('paste', function (e) {
e.preventDefault();
const items = e.clipboardData.items;
for (let item of items) {
if (item.type.startsWith('image/')) {
const file = item.getAsFile();
fileInput.addEventListener("change", function (e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
displayContent(event.target.result);
};
reader.readAsDataURL(file);
}
});
// Handle paste from clipboard
uploadZone.addEventListener("paste", function (e) {
e.preventDefault();
const items = e.clipboardData.items;
for (let item of items) {
if (item.type.startsWith("image/")) {
const file = item.getAsFile();
const reader = new FileReader();
reader.onload = function (event) {
displayContent(event.target.result);
};
reader.readAsDataURL(file);
return;
}
}
const text = e.clipboardData.getData("text");
if (text) {
displayContent(text, true);
}
});
// Handle drag and drop
uploadZone.addEventListener("drop", handleDrop);
uploadContainer.addEventListener("drop", handleDrop);
function handleDrop(e) {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = function (event) {
displayContent(event.target.result);
};
reader.readAsDataURL(file);
return;
}
}
const text = e.clipboardData.getData('text');
if (text) {
displayContent(text, true);
}
});
uploadZone.addEventListener("dragover", function (e) {
e.preventDefault();
uploadZone.style.borderColor = "var(--border-hover)";
});
// Handle drag and drop
uploadZone.addEventListener('drop', handleDrop);
uploadContainer.addEventListener('drop', handleDrop);
uploadZone.addEventListener("dragleave", function (e) {
uploadZone.style.borderColor = "";
});
function handleDrop(e) {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function (event) {
displayContent(event.target.result);
};
reader.readAsDataURL(file);
}
}
uploadContainer.addEventListener("dragover", function (e) {
e.preventDefault();
});
uploadZone.addEventListener('dragover', function (e) {
e.preventDefault();
uploadZone.style.borderColor = 'var(--border-hover)';
});
uploadZone.setAttribute("tabindex", "0");
uploadZone.addEventListener('dragleave', function (e) {
uploadZone.style.borderColor = '';
});
window.addEventListener("focus", function () {
uploadZone.focus();
});
uploadContainer.addEventListener('dragover', function (e) {
e.preventDefault();
});
uploadZone.setAttribute('tabindex', '0');
window.addEventListener('focus', function () {
uploadZone.focus();
});
uploadZone.focus();
// Improved zoom overlay functions
function showZoom(content, isText = false) {
if (isText) {
zoomOverlay.innerHTML = `
<div class="zoom-text-content">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
// Improved zoom overlay functions
function showZoom(content, isText = false) {
if (isText) {
zoomOverlay.innerHTML = `
<div class="zoom-text-content">${content
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")}</div>
`;
} else {
zoomOverlay.innerHTML = `<img id="zoomImage" src="${content}" alt="Zoomed Image" style="max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(51, 204, 255, 0.5);">`;
} else {
zoomOverlay.innerHTML = `<img id="zoomImage" src="${content}" alt="Zoomed Image" style="max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(51, 204, 255, 0.5);">`;
}
zoomOverlay.style.display = "flex";
}
zoomOverlay.style.display = 'flex';
}
function hideZoom() {
zoomOverlay.style.display = 'none';
}
zoomOverlay.addEventListener('click', hideZoom);
// ESC TO EXIT ZOOM
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' || e.key === 'Esc') {
hideZoom();
function hideZoom() {
zoomOverlay.style.display = "none";
}
});
window.addEventListener('resize', function () {
if (currentContentData) {
displayContent(currentContentData);
}
});
</script>
</body>
zoomOverlay.addEventListener("click", hideZoom);
</html>
// ESC TO EXIT ZOOM
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" || e.key === "Esc") {
hideZoom();
}
});
window.addEventListener("resize", function () {
if (currentContentData) {
displayContent(currentContentData);
}
});
</script>
</body>
</html>

244
data/html/stats.html Normal file
View File

@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Black Hole Share - Statistics</title>
<link rel="stylesheet" href="/style.css" />
<style>
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.stat-card {
background-color: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
border-color: var(--border-hover);
box-shadow: 0 4px 15px rgba(0, 255, 153, 0.2);
}
.stat-value {
font-size: 2.5em;
font-weight: bold;
color: var(--accent-cyan);
margin: 10px 0;
}
.stat-label {
color: var(--text-secondary);
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-card.highlight .stat-value {
color: var(--accent-green);
}
.recent-activity {
margin-top: 30px;
background-color: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 20px;
}
.recent-activity h2 {
color: var(--accent-cyan);
margin: 0 0 15px 0;
font-size: 1.2em;
}
.activity-list {
max-height: 300px;
overflow-y: auto;
font-family: "JetBrains Mono", monospace;
font-size: 0.85em;
}
.activity-item {
padding: 8px 0;
border-bottom: 1px solid var(--inactive-gray);
display: flex;
justify-content: space-between;
align-items: center;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-action {
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8em;
font-weight: bold;
}
.activity-action.upload {
background-color: rgba(0, 255, 153, 0.2);
color: var(--accent-green);
}
.activity-action.delete {
background-color: rgba(255, 102, 102, 0.2);
color: #ff6666;
}
.activity-time {
color: var(--text-secondary);
}
.activity-details {
color: var(--text-primary);
}
.refresh-btn {
background-color: var(--border-color);
color: var(--bg-tertiary);
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
margin-top: 20px;
transition: all 0.2s ease;
}
.refresh-btn:hover {
background-color: var(--border-hover);
}
.loading {
text-align: center;
color: var(--text-secondary);
padding: 40px;
}
</style>
</head>
<body class="view-page">
<h1><a href="/" class="home-link">Black Hole Share</a> - Statistics</h1>
<div id="statsContent" class="loading">
<p>Loading statistics...</p>
</div>
<footer class="powered-by">
<span
>Powered by: <img src="/logo.png" alt="ICSBox" class="footer-logo"
/></span>
</footer>
<script>
async function loadStats() {
try {
const response = await fetch("/api/stats");
if (!response.ok) {
throw new Error("Failed to load stats");
}
const stats = await response.json();
renderStats(stats);
} catch (error) {
document.getElementById("statsContent").innerHTML = `
<p class="error">Failed to load statistics: ${error.message}</p>
`;
}
}
function formatBytes(bytes) {
if (bytes === 0) return "0 B";
const k = 1024;
const sizes = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}
function formatTime(timestamp) {
const date = new Date(timestamp);
return date.toLocaleString();
}
function renderStats(stats) {
const html = `
<div class="stats-container">
<div class="stat-card highlight">
<div class="stat-label">Active Assets</div>
<div class="stat-value">${stats.active_assets}</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Uploads</div>
<div class="stat-value">${stats.total_uploads}</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Deleted</div>
<div class="stat-value">${stats.total_deleted}</div>
</div>
<div class="stat-card">
<div class="stat-label">Storage Used</div>
<div class="stat-value">${formatBytes(stats.storage_bytes)}</div>
</div>
<div class="stat-card">
<div class="stat-label">Images</div>
<div class="stat-value">${stats.image_count}</div>
</div>
<div class="stat-card">
<div class="stat-label">Text</div>
<div class="stat-value">${stats.text_count}</div>
</div>
<div class="stat-card">
<div class="stat-label">Avg Response</div>
<div class="stat-value">${stats.avg_response_ms.toFixed(2)} ms</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Requests</div>
<div class="stat-value">${stats.total_requests}</div>
</div>
</div>
<div class="recent-activity">
<h2>Recent Activity</h2>
<div class="activity-list">
${
stats.recent_activity.length === 0
? '<p style="color: var(--text-secondary);">No recent activity</p>'
: stats.recent_activity
.map(
(item) => `
<div class="activity-item">
<span class="activity-action ${item.action}">${
item.action
}</span>
<span class="activity-details">${item.mime} (${formatBytes(
item.size_bytes
)})</span>
<span class="activity-time">${item.timestamp}</span>
</div>
`
)
.join("")
}
</div>
</div>
<button class="refresh-btn" onclick="loadStats()">Refresh</button>
`;
document.getElementById("statsContent").innerHTML = html;
}
loadStats();
// Auto-refresh every 30 seconds
setInterval(loadStats, 30000);
</script>
</body>
</html>

View File

@@ -3,7 +3,10 @@ use base64::{Engine, engine::general_purpose};
use serde::Deserialize;
use serde_json::json;
use crate::{DATA_STORAGE, logs::log_to_file};
use crate::{
DATA_STORAGE,
logs::{log_asset_event, log_to_file},
};
#[derive(Deserialize, Debug)]
pub struct UploadRequest {
@@ -13,20 +16,43 @@ pub struct UploadRequest {
}
#[post("/api/upload")]
async fn api_upload(req: web::Json<UploadRequest>) -> Result<HttpResponse, actix_web::Error> {
async fn api_upload(req: HttpRequest, body: web::Json<UploadRequest>) -> Result<HttpResponse, actix_web::Error> {
// Convert to bytes
let content_bytes = if req.content_type == "text/plain" {
req.content.as_bytes().to_vec() // UTF-8 bytes
let content_bytes = if body.content_type == "text/plain" {
body.content.as_bytes().to_vec() // UTF-8 bytes
} else {
// Decode base64 → bytes
general_purpose::STANDARD.decode(&req.content).unwrap()
general_purpose::STANDARD.decode(&body.content).unwrap()
};
let asset = crate::data_mgt::Asset::new(req.duration, req.content_type.clone(), content_bytes);
let connection_info = req.connection_info();
let uploader_ip = connection_info
.realip_remote_addr()
.or_else(|| connection_info.peer_addr())
.unwrap_or("-")
.to_string();
let asset = crate::data_mgt::Asset::new(
body.duration,
body.content_type.clone(),
content_bytes,
Some(uploader_ip.clone()),
);
let id = asset
.save()
.map_err(|e| actix_web::error::ErrorInternalServerError(format!("Failed to save asset: {}", e)))?;
log_asset_event(
"upload",
asset.id(),
asset.mime(),
asset.size_bytes(),
asset.share_duration(),
asset.created_at(),
asset.expires_at(),
asset.uploader_ip().unwrap_or("-"),
);
let response_body = json!({ "link": format!("/bhs/{}", id) });
Ok(HttpResponse::Ok().json(response_body))
}
@@ -48,3 +74,140 @@ async fn api_get_asset(req: HttpRequest, path: web::Path<String>) -> Result<Http
log_to_file(&req, now);
Ok(HttpResponse::Ok().content_type(asset.mime()).body(asset.content()))
}
#[derive(serde::Serialize)]
struct StatsResponse {
active_assets: usize,
total_uploads: usize,
total_deleted: usize,
storage_bytes: u64,
image_count: usize,
text_count: usize,
avg_response_ms: f64,
total_requests: usize,
recent_activity: Vec<ActivityItem>,
}
#[derive(serde::Serialize)]
struct ActivityItem {
action: String,
mime: String,
size_bytes: usize,
timestamp: String,
}
#[get("/api/stats")]
async fn api_stats() -> Result<HttpResponse, actix_web::Error> {
use crate::LOG_DIR;
use std::fs;
let mut active_assets = 0;
let mut storage_bytes: u64 = 0;
let mut image_count = 0;
let mut text_count = 0;
// Count active assets and calculate storage
if let Ok(entries) = fs::read_dir(DATA_STORAGE) {
for entry in entries.flatten() {
if let Ok(data) = fs::read(entry.path()) {
if let Ok(asset) = serde_json::from_slice::<crate::data_mgt::Asset>(&data) {
if !asset.is_expired() {
active_assets += 1;
storage_bytes += asset.size_bytes() as u64;
if asset.mime().starts_with("image/") {
image_count += 1;
} else if asset.mime().starts_with("text/") {
text_count += 1;
}
}
}
}
}
}
// Parse log for upload/delete counts, response times, and recent activity
let mut total_uploads = 0;
let mut total_deleted = 0;
let mut recent_activity: Vec<ActivityItem> = Vec::new();
let mut total_response_ms: f64 = 0.0;
let mut request_count: usize = 0;
let log_path = format!("{}access.log", LOG_DIR);
if let Ok(content) = fs::read_to_string(&log_path) {
for line in content.lines() {
// Parse response time from request logs
if line.contains("dur_ms=") {
if let Some(dur_str) = line.split("dur_ms=").nth(1) {
if let Some(dur_val) = dur_str.split_whitespace().next() {
if let Ok(ms) = dur_val.parse::<f64>() {
total_response_ms += ms;
request_count += 1;
}
}
}
}
if line.contains("event=asset") {
if line.contains("action=upload") {
total_uploads += 1;
} else if line.contains("action=delete_expired") {
total_deleted += 1;
}
// Parse for recent activity (last 20)
if let Some(activity) = parse_activity_line(line) {
recent_activity.push(activity);
}
}
}
}
let avg_response_ms = if request_count > 0 { total_response_ms / request_count as f64 } else { 0.0 };
// Keep only last 20, most recent first
recent_activity.reverse();
recent_activity.truncate(20);
let response = StatsResponse {
active_assets,
total_uploads,
total_deleted,
storage_bytes,
image_count,
text_count,
avg_response_ms,
total_requests: request_count,
recent_activity,
};
Ok(HttpResponse::Ok().json(response))
}
fn parse_activity_line(line: &str) -> Option<ActivityItem> {
let timestamp = line.split_whitespace().next()?.to_string();
let action = if line.contains("action=upload") {
"upload".to_string()
} else if line.contains("action=delete_expired") {
"delete".to_string()
} else {
return None;
};
let mime = line.split("mime=").nth(1)?.split_whitespace().next()?.to_string();
let size_bytes: usize = line
.split("size_bytes=")
.nth(1)?
.split_whitespace()
.next()?
.parse()
.ok()?;
Some(ActivityItem {
action,
mime,
size_bytes,
timestamp,
})
}

View File

@@ -3,6 +3,7 @@ use chrono::{Duration, Utc};
use serde::{Deserialize, Serialize};
use crate::DATA_STORAGE;
use crate::logs::log_asset_event;
#[derive(Debug, Serialize, Deserialize, Default)]
pub struct Asset {
@@ -12,10 +13,12 @@ pub struct Asset {
expires_at: i64,
mime: String,
content: Vec<u8>,
#[serde(default)]
uploader_ip: Option<String>,
}
impl Asset {
pub fn new(share_duration: u32, mime: String, content: Vec<u8>) -> Self {
pub fn new(share_duration: u32, mime: String, content: Vec<u8>, uploader_ip: Option<String>) -> Self {
let id = uuid::Uuid::new_v4().to_string();
let created_at = Utc::now().timestamp_millis();
let expires_at = created_at + Duration::minutes(share_duration as i64).num_milliseconds();
@@ -26,6 +29,7 @@ impl Asset {
expires_at,
mime,
content,
uploader_ip,
}
}
pub fn is_expired(&self) -> bool {
@@ -44,6 +48,26 @@ impl Asset {
self.content.clone()
}
pub fn share_duration(&self) -> u32 {
self.share_duration
}
pub fn created_at(&self) -> i64 {
self.created_at
}
pub fn expires_at(&self) -> i64 {
self.expires_at
}
pub fn size_bytes(&self) -> usize {
self.content.len()
}
pub fn uploader_ip(&self) -> Option<&str> {
self.uploader_ip.as_deref()
}
pub fn to_bytes(&self) -> Result<Vec<u8>> {
let bytes = serde_json::to_vec(self)?;
Ok(bytes)
@@ -68,6 +92,16 @@ pub async fn clear_assets() -> Result<()> {
let asset = serde_json::from_slice::<Asset>(&data)?;
if asset.is_expired() {
println!("Removing expired asset: {}", asset.id());
log_asset_event(
"delete_expired",
asset.id(),
asset.mime(),
asset.size_bytes(),
asset.share_duration(),
asset.created_at(),
asset.expires_at(),
asset.uploader_ip().unwrap_or("-"),
);
std::fs::remove_file(&path)?;
}
}

View File

@@ -11,6 +11,12 @@ pub fn log_to_file(req: &HttpRequest, start: Instant) {
let log_path = LOG_DIR.to_string() + "access.log";
// Ensure log directory exists
if let Err(e) = std::fs::create_dir_all(LOG_DIR) {
eprintln!("failed to create log dir: {}", e);
return;
}
let Ok(mut file) = OpenOptions::new().create(true).append(true).open(log_path) else {
eprintln!("failed to open log file");
return;
@@ -40,3 +46,35 @@ pub fn log_to_file(req: &HttpRequest, start: Instant) {
let _ = file.write_all(line.as_bytes());
}
pub fn log_asset_event(
action: &str,
id: &str,
mime: &str,
size_bytes: usize,
duration_min: u32,
created_at_ms: i64,
expires_at_ms: i64,
uploader_ip: &str,
) {
// Ensure logging directory exists before writing
if let Err(e) = std::fs::create_dir_all(LOG_DIR) {
eprintln!("failed to create log dir for asset event: {}", e);
return;
}
let log_path = LOG_DIR.to_string() + "access.log";
let Ok(mut file) = OpenOptions::new().create(true).append(true).open(log_path) else {
eprintln!("failed to open log file for asset event");
return;
};
let ts = chrono::Local::now().to_rfc3339();
let line = format!(
"{ts} event=asset action={action} id={id} mime={mime} size_bytes={size_bytes} duration_min={duration_min} created_at_ms={created_at_ms} expires_at_ms={expires_at_ms} uploader_ip={uploader_ip}\n"
);
let _ = file.write_all(line.as_bytes());
}

View File

@@ -10,9 +10,9 @@ use actix_web::{
use serde_json::Value;
use std::{env, fs, path::PathBuf, sync::LazyLock};
pub static HTML_DIR: &str = "html/";
pub static LOG_DIR: &str = "logs/";
pub static DATA_STORAGE: &str = "storage/";
pub static HTML_DIR: &str = "data/html/";
pub static LOG_DIR: &str = "data/logs/";
pub static DATA_STORAGE: &str = "data/storage/";
pub static BIND_ADDR: LazyLock<String> = LazyLock::new(|| match env::var("BIND_ADDR") {
Ok(addr) => {
@@ -43,7 +43,7 @@ pub static STATIC_PAGES: LazyLock<Vec<String>> = LazyLock::new(|| {
});
use crate::{
api::{api_get_asset, api_upload},
api::{api_get_asset, api_stats, api_upload},
logs::log_to_file,
};
@@ -102,6 +102,7 @@ async fn main() -> std::io::Result<()> {
.service(view_asset)
.service(api_get_asset)
.service(api_upload)
.service(api_stats)
.service(catch_all)
})
.bind((BIND_ADDR.clone(), *BIND_PORT))?