Compare commits

2 Commits

Author SHA1 Message Date
f56b60b004 Implement upload progress tracking with speed and progress bar
All checks were successful
continuous-integration/drone/push Build is passing
Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>
2025-06-17 17:12:13 +00:00
aa64143066 Initial plan for issue 2025-06-17 17:02:59 +00:00
15 changed files with 416 additions and 795 deletions

4
.gitignore vendored
View File

@ -1,7 +1,3 @@
target/
data/
.idea/
ui_src/dist/
ui_src/node_modules/
ui_src/package-lock.json
ui_src/*.tsbuildinfo

1
Cargo.lock generated
View File

@ -3323,7 +3323,6 @@ dependencies = [
"sqlx",
"tokio",
"tokio-util",
"url",
"uuid",
"walkdir",
]

View File

@ -36,14 +36,13 @@ sha2 = "0.10.8"
sqlx = { version = "0.8.1", features = ["mysql", "runtime-tokio", "chrono", "uuid"] }
config = { version = "0.15.7", features = ["yaml"] }
chrono = { version = "0.4.38", features = ["serde"] }
reqwest = { version = "0.12.8", features = ["stream", "http2", "json"] }
reqwest = { version = "0.12.8", features = ["stream", "http2"] }
clap = { version = "4.5.18", features = ["derive"] }
mime2ext = "0.1.53"
infer = "0.19.0"
tokio-util = { version = "0.7.13", features = ["io", "io-util"] }
http-range-header = { version = "0.4.2" }
base58 = "0.2.0"
url = "2.5.0"
libc = { version = "0.2.153", optional = true }
ffmpeg-rs-raw = { git = "https://git.v0l.io/Kieran/ffmpeg-rs-raw.git", rev = "aa1ce3edcad0fcd286d39b3e0c2fdc610c3988e7", optional = true }

View File

@ -66,7 +66,13 @@
const file = input.files[0];
console.debug(file);
await uploadBlossom(file);
const r_nip96 = document.querySelector("#method-nip96").checked;
const r_blossom = document.querySelector("#method-blossom").checked;
if (r_nip96) {
await uploadFilesNip96(file)
} else if (r_blossom) {
await uploadBlossom(file);
}
} catch (ex) {
if (ex instanceof Error) {
alert(ex.message);
@ -141,7 +147,16 @@
Welcome to route96
</h1>
<div class="flex flex-col gap-2">
<div>
<label>
NIP-96
<input type="radio" name="method" id="method-nip96"/>
</label>
<label>
Blossom
<input type="radio" name="method" id="method-blossom"/>
</label>
</div>
<div style="color: #ff8383;">
You must have a nostr extension for this to work
</div>
@ -149,7 +164,7 @@
<div>
<input type="checkbox" id="no_transform">
<label for="no_transform">
Disable compression (videos and images)
Disable compression (images)
</label>
</div>
<div>

View File

@ -12,7 +12,7 @@ pub fn admin_routes() -> Vec<Route> {
admin_list_files,
admin_get_self,
admin_list_reports,
admin_acknowledge_report,
admin_acknowledge_report
]
}

View File

@ -15,9 +15,8 @@ use rocket::{routes, Data, Request, Response, Route, State};
use serde::{Deserialize, Serialize};
use tokio::io::AsyncRead;
use tokio_util::io::StreamReader;
use url::Url;
#[derive(Debug, Clone, Serialize, Deserialize)]
#[derive(Debug, Clone, Serialize)]
#[serde(crate = "rocket::serde")]
pub struct BlobDescriptor {
pub url: String,
@ -226,25 +225,15 @@ async fn mirror(
settings: &State<Settings>,
req: Json<MirrorRequest>,
) -> BlossomResponse {
if !check_method(&auth.event, "upload") {
if !check_method(&auth.event, "mirror") {
return BlossomResponse::error("Invalid request method tag");
}
if let Some(e) = check_whitelist(&auth, settings) {
return e;
}
let url = match Url::parse(&req.url) {
Ok(u) => u,
Err(e) => return BlossomResponse::error(format!("Invalid URL: {}", e)),
};
let hash = url
.path_segments()
.and_then(|mut c| c.next_back())
.and_then(|s| s.split(".").next());
// download file
let rsp = match reqwest::get(url.clone()).await {
let rsp = match reqwest::get(&req.url).await {
Err(e) => {
error!("Error downloading file: {}", e);
return BlossomResponse::error("Failed to mirror file");
@ -261,10 +250,9 @@ async fn mirror(
let pubkey = auth.event.pubkey.to_bytes().to_vec();
process_stream(
StreamReader::new(
rsp.bytes_stream()
.map(|result| result.map_err(std::io::Error::other)),
),
StreamReader::new(rsp.bytes_stream().map(|result| {
result.map_err(std::io::Error::other)
})),
&mime_type,
&None,
&pubkey,
@ -273,7 +261,6 @@ async fn mirror(
fs,
db,
settings,
hash.and_then(|h| hex::decode(h).ok()),
)
.await
}
@ -380,11 +367,15 @@ async fn process_upload(
// check quota (only if payments are configured)
#[cfg(feature = "payments")]
if let Some(payment_config) = &settings.payments {
let free_quota = payment_config.free_quota_bytes.unwrap_or(104857600); // Default to 100MB
let free_quota = payment_config.free_quota_bytes
.unwrap_or(104857600); // Default to 100MB
let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
if size > 0 {
match db.check_user_quota(&pubkey_vec, size, free_quota).await {
match db
.check_user_quota(&pubkey_vec, size, free_quota)
.await
{
Ok(false) => return BlossomResponse::error("Upload would exceed quota"),
Err(_) => return BlossomResponse::error("Failed to check quota"),
Ok(true) => {} // Quota check passed
@ -404,7 +395,6 @@ async fn process_upload(
fs,
db,
settings,
None,
)
.await
}
@ -419,7 +409,6 @@ async fn process_stream<'p, S>(
fs: &State<FileStore>,
db: &State<Database>,
settings: &State<Settings>,
expect_hash: Option<Vec<u8>>,
) -> BlossomResponse
where
S: AsyncRead + Unpin + 'p,
@ -428,15 +417,6 @@ where
Ok(FileSystemResult::NewFile(blob)) => {
let mut ret: FileUpload = (&blob).into();
// check expected hash (mirroring)
if let Some(h) = expect_hash {
if h != ret.id {
if let Err(e) = tokio::fs::remove_file(fs.get(&ret.id)).await {
log::warn!("Failed to cleanup file: {}", e);
}
return BlossomResponse::error("Mirror request failed, server responses with invalid file content (hash mismatch)");
}
}
// update file data before inserting
ret.name = name.map(|s| s.to_string());
@ -463,7 +443,8 @@ where
#[cfg(feature = "payments")]
if size == 0 {
if let Some(payment_config) = &settings.payments {
let free_quota = payment_config.free_quota_bytes.unwrap_or(104857600); // Default to 100MB
let free_quota = payment_config.free_quota_bytes
.unwrap_or(104857600); // Default to 100MB
match db.check_user_quota(pubkey, upload.size, free_quota).await {
Ok(false) => {

View File

@ -7,7 +7,7 @@ function App() {
return (
<Router>
<div className="min-h-screen bg-gray-900">
<div className="max-lg:px-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Header />
<main className="py-8">
<Routes>

View File

@ -1,370 +0,0 @@
import { useState, useEffect } from "react";
import { Blossom } from "../upload/blossom";
import { FormatBytes } from "../const";
import Button from "./button";
import usePublisher from "../hooks/publisher";
import useLogin from "../hooks/login";
interface FileMirrorSuggestion {
sha256: string;
url: string;
size: number;
mime_type?: string;
available_on: string[];
missing_from: string[];
}
interface MirrorSuggestionsProps {
servers: string[];
}
interface MirrorProgress {
total: number;
completed: number;
failed: number;
errors: string[];
}
export default function MirrorSuggestions({ servers }: MirrorSuggestionsProps) {
const [suggestions, setSuggestions] = useState<FileMirrorSuggestion[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string>();
const [mirrorAllProgress, setMirrorAllProgress] = useState<MirrorProgress | null>(null);
const pub = usePublisher();
const login = useLogin();
useEffect(() => {
if (servers.length > 1 && pub && login?.pubkey) {
fetchSuggestions();
}
}, [servers, pub, login?.pubkey]);
async function fetchSuggestions() {
if (!pub || !login?.pubkey) return;
try {
setLoading(true);
setError(undefined);
// Capture the servers list at the start to avoid race conditions
const serverList = [...servers];
if (serverList.length <= 1) {
setLoading(false);
return;
}
const fileMap: Map<string, FileMirrorSuggestion> = new Map();
// Fetch files from each server
for (const serverUrl of serverList) {
try {
const blossom = new Blossom(serverUrl, pub);
const files = await blossom.list(login.pubkey);
for (const file of files) {
const suggestion = fileMap.get(file.sha256);
if (suggestion) {
suggestion.available_on.push(serverUrl);
} else {
fileMap.set(file.sha256, {
sha256: file.sha256,
url: file.url || "",
size: file.size,
mime_type: file.type,
available_on: [serverUrl],
missing_from: [],
});
}
}
} catch (e) {
console.error(`Failed to fetch files from ${serverUrl}:`, e);
// Continue with other servers instead of failing completely
}
}
// Determine missing servers for each file using the captured server list
for (const suggestion of fileMap.values()) {
for (const serverUrl of serverList) {
if (!suggestion.available_on.includes(serverUrl)) {
suggestion.missing_from.push(serverUrl);
}
}
}
// Filter to only files that are missing from at least one server and available on at least one
const filteredSuggestions = Array.from(fileMap.values()).filter(
s => s.missing_from.length > 0 && s.available_on.length > 0
);
setSuggestions(filteredSuggestions);
} catch (e) {
if (e instanceof Error) {
setError(e.message);
} else {
setError("Failed to fetch mirror suggestions");
}
} finally {
setLoading(false);
}
}
async function mirrorAll() {
if (!pub || suggestions.length === 0) return;
// Calculate total operations needed
const totalOperations = suggestions.reduce((total, suggestion) =>
total + suggestion.missing_from.length, 0
);
setMirrorAllProgress({
total: totalOperations,
completed: 0,
failed: 0,
errors: []
});
let completed = 0;
let failed = 0;
const errors: string[] = [];
// Mirror all files to all missing servers
for (const suggestion of suggestions) {
for (const targetServer of suggestion.missing_from) {
try {
const blossom = new Blossom(targetServer, pub);
await blossom.mirror(suggestion.url);
completed++;
setMirrorAllProgress(prev => prev ? {
...prev,
completed: completed,
failed: failed
} : null);
// Update suggestions in real-time
setSuggestions(prev =>
prev.map(s =>
s.sha256 === suggestion.sha256
? {
...s,
available_on: [...s.available_on, targetServer],
missing_from: s.missing_from.filter(server => server !== targetServer)
}
: s
).filter(s => s.missing_from.length > 0)
);
} catch (e) {
failed++;
const errorMessage = e instanceof Error ? e.message : "Unknown error";
const serverHost = new URL(targetServer).hostname;
errors.push(`${serverHost}: ${errorMessage}`);
setMirrorAllProgress(prev => prev ? {
...prev,
completed: completed,
failed: failed,
errors: [...errors]
} : null);
}
}
}
// Keep progress visible for a moment before clearing
setTimeout(() => {
setMirrorAllProgress(null);
}, 3000);
}
// Calculate coverage statistics
const totalFiles = suggestions.length;
const totalMirrorOperations = suggestions.reduce((total, suggestion) =>
total + suggestion.missing_from.length, 0
);
const totalSize = suggestions.reduce((total, suggestion) => total + suggestion.size, 0);
// Calculate coverage per server
const serverCoverage = servers.map(serverUrl => {
const filesOnServer = suggestions.filter(s => s.available_on.includes(serverUrl)).length;
const totalFilesAcrossAllServers = new Set(suggestions.map(s => s.sha256)).size;
const coveragePercentage = totalFilesAcrossAllServers > 0 ?
Math.round((filesOnServer / totalFilesAcrossAllServers) * 100) : 100;
return {
url: serverUrl,
hostname: new URL(serverUrl).hostname,
filesCount: filesOnServer,
totalFiles: totalFilesAcrossAllServers,
coveragePercentage
};
});
if (servers.length <= 1) {
return null; // No suggestions needed for single server
}
if (loading) {
return (
<div className="card">
<h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
<p className="text-gray-400">Loading mirror suggestions...</p>
</div>
);
}
if (error) {
return (
<div className="card">
<h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg mb-4">
{error}
</div>
<Button onClick={fetchSuggestions} className="btn-secondary">
Retry
</Button>
</div>
);
}
if (suggestions.length === 0) {
return (
<div className="card">
<h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
<p className="text-gray-400">All your files are synchronized across all servers.</p>
</div>
);
}
return (
<div className="card">
<h3 className="text-lg font-semibold mb-4">Mirror Coverage</h3>
{/* Coverage Summary */}
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6">
<div className="grid grid-cols-3 gap-4 text-center">
<div>
<div className="text-2xl font-bold text-blue-400">{totalFiles}</div>
<div className="text-xs text-gray-400">Files to Mirror</div>
</div>
<div>
<div className="text-2xl font-bold text-orange-400">{totalMirrorOperations}</div>
<div className="text-xs text-gray-400">Operations Needed</div>
</div>
<div>
<div className="text-2xl font-bold text-green-400">{FormatBytes(totalSize)}</div>
<div className="text-xs text-gray-400">Total Size</div>
</div>
</div>
</div>
{/* Server Coverage */}
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6">
<h4 className="text-sm font-semibold text-gray-300 mb-3">Coverage by Server</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{serverCoverage.map((server) => (
<div key={server.url} className="bg-gray-750 border border-gray-600 rounded-lg p-3">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-300 truncate">
{server.hostname}
</span>
<span
className={`text-sm font-semibold ${server.coveragePercentage === 100
? "text-green-400"
: server.coveragePercentage >= 80
? "text-yellow-400"
: "text-red-400"
}`}
>
{server.coveragePercentage}%
</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2 mb-2">
<div
className={`h-2 rounded-full transition-all duration-300 ${server.coveragePercentage === 100
? "bg-green-500"
: server.coveragePercentage >= 80
? "bg-yellow-500"
: "bg-red-500"
}`}
style={{
width: `${server.coveragePercentage}%`,
}}
></div>
</div>
<div className="text-xs text-gray-400 text-center">
{server.filesCount} / {server.totalFiles} files
</div>
</div>
))}
</div>
</div>
{/* Mirror All Section */}
{!mirrorAllProgress ? (
<div className="text-center">
<p className="text-gray-400 mb-4">
{totalFiles} files need to be synchronized across your servers
</p>
<Button
onClick={mirrorAll}
className="btn-primary"
disabled={totalMirrorOperations === 0}
>
Mirror Everything
</Button>
</div>
) : (
<div className="space-y-4">
{/* Progress Bar */}
<div>
<div className="flex justify-between text-sm mb-2">
<span className="text-gray-400">Progress</span>
<span className="text-gray-400">
{mirrorAllProgress.completed + mirrorAllProgress.failed} / {mirrorAllProgress.total}
</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
style={{
width: `${((mirrorAllProgress.completed + mirrorAllProgress.failed) / mirrorAllProgress.total) * 100}%`
}}
/>
</div>
</div>
{/* Status Summary */}
<div className="grid grid-cols-3 gap-4 text-center text-sm">
<div>
<div className="text-green-400 font-semibold">{mirrorAllProgress.completed}</div>
<div className="text-gray-400">Completed</div>
</div>
<div>
<div className="text-red-400 font-semibold">{mirrorAllProgress.failed}</div>
<div className="text-gray-400">Failed</div>
</div>
<div>
<div className="text-gray-400 font-semibold">
{mirrorAllProgress.total - mirrorAllProgress.completed - mirrorAllProgress.failed}
</div>
<div className="text-gray-400">Remaining</div>
</div>
</div>
{/* Errors */}
{mirrorAllProgress.errors.length > 0 && (
<div className="bg-red-900/20 border border-red-800 rounded-lg p-3">
<h4 className="text-red-400 font-semibold mb-2">Errors ({mirrorAllProgress.errors.length})</h4>
<div className="space-y-1 max-h-32 overflow-y-auto">
{mirrorAllProgress.errors.map((error, index) => (
<div key={index} className="text-red-300 text-xs">{error}</div>
))}
</div>
</div>
)}
</div>
)}
</div>
);
}

View File

@ -43,6 +43,3 @@ export function FormatBytes(b: number, f?: number) {
if (b >= kiB) return (b / kiB).toFixed(f) + " KiB";
return b.toFixed(f) + " B";
}
export const ServerUrl =
import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;

View File

@ -1,25 +0,0 @@
import useLogin from "./login";
import { useRequestBuilder } from "@snort/system-react";
import { EventKind, RequestBuilder } from "@snort/system";
import { dedupe, removeUndefined, sanitizeRelayUrl } from "@snort/shared";
import { ServerUrl } from "../const";
const DefaultMediaServers = ["https://blossom.band/", "https://blossom.primal.net", ServerUrl]
export function useBlossomServers() {
const login = useLogin();
const rb = new RequestBuilder("media-servers");
if (login?.pubkey) {
rb.withFilter()
.kinds([10_063 as EventKind])
.authors([login.pubkey]);
}
const req = useRequestBuilder(rb);
const servers = req === undefined ? undefined :
req
.flatMap((e) => e.tags.filter(t => t[0] === "server")
.map((t) => t[1]));
return dedupe(removeUndefined([...DefaultMediaServers, ...(servers ?? [])].map(sanitizeRelayUrl)));
}

View File

@ -65,7 +65,7 @@ export class Blossom {
const rsp = await this.#req(
"mirror",
"PUT",
"upload",
"mirror",
JSON.stringify({ url }),
undefined,
{

View File

@ -3,7 +3,6 @@ export async function openFile(): Promise<File | undefined> {
const elm = document.createElement("input");
let lock = false;
elm.type = "file";
elm.multiple = true; // Allow multiple file selection
const handleInput = (e: Event) => {
lock = true;
const elm = e.target as HTMLInputElement;
@ -29,35 +28,3 @@ export async function openFile(): Promise<File | undefined> {
);
});
}
export async function openFiles(): Promise<FileList | undefined> {
return new Promise((resolve) => {
const elm = document.createElement("input");
let lock = false;
elm.type = "file";
elm.multiple = true;
const handleInput = (e: Event) => {
lock = true;
const elm = e.target as HTMLInputElement;
if ((elm.files?.length ?? 0) > 0) {
resolve(elm.files!);
} else {
resolve(undefined);
}
};
elm.onchange = (e) => handleInput(e);
elm.click();
window.addEventListener(
"focus",
() => {
setTimeout(() => {
if (!lock) {
resolve(undefined);
}
}, 300);
},
{ once: true },
);
});
}

View File

@ -43,7 +43,7 @@ export default function Header() {
return (
<header className="border-b border-gray-700 bg-gray-800 w-full">
<div className="px-4 flex justify-between items-center py-4">
<div className="px-4 sm:px-6 lg:px-8 flex justify-between items-center py-4">
<div className="flex items-center space-x-8">
<Link to="/">
<div className="text-2xl font-bold text-gray-100 hover:text-blue-400 transition-colors">

View File

@ -3,41 +3,36 @@ import Button from "../components/button";
import FileList from "./files";
import PaymentFlow from "../components/payment";
import ProgressBar from "../components/progress-bar";
import MirrorSuggestions from "../components/mirror-suggestions";
import { useBlossomServers } from "../hooks/use-blossom-servers";
import { openFiles } from "../upload";
import { Blossom, BlobDescriptor } from "../upload/blossom";
import { openFile } from "../upload";
import { Blossom } from "../upload/blossom";
import useLogin from "../hooks/login";
import usePublisher from "../hooks/publisher";
import { Nip96, Nip96FileList } from "../upload/nip96";
import { AdminSelf, Route96 } from "../upload/admin";
import { FormatBytes, ServerUrl } from "../const";
import { FormatBytes } from "../const";
import { UploadProgress } from "../upload/progress";
export default function Upload() {
const [stripMetadata, setStripMetadata] = useState(true);
const [type, setType] = useState<"blossom" | "nip96">("blossom");
const [noCompress, setNoCompress] = useState(false);
const [toUpload, setToUpload] = useState<File>();
const [self, setSelf] = useState<AdminSelf>();
const [error, setError] = useState<string>();
const [results, setResults] = useState<Array<BlobDescriptor>>([]);
const [results, setResults] = useState<Array<object>>([]);
const [listedFiles, setListedFiles] = useState<Nip96FileList>();
const [listedPage, setListedPage] = useState(0);
const [showPaymentFlow, setShowPaymentFlow] = useState(false);
const [isUploading, setIsUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState<UploadProgress>();
const blossomServers = useBlossomServers();
const login = useLogin();
const pub = usePublisher();
// Check if file should have compression enabled by default
const shouldCompress = (file: File) => {
return file.type.startsWith('video/') || file.type.startsWith('image/');
};
async function doUpload(file: File) {
const url =
import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
async function doUpload() {
if (!pub) return;
if (!file) return;
if (!toUpload) return;
if (isUploading) return; // Prevent multiple uploads
try {
@ -49,13 +44,19 @@ export default function Upload() {
setUploadProgress(progress);
};
const uploader = new Blossom(ServerUrl, pub);
// Use compression for video and image files when metadata stripping is enabled
const useCompression = shouldCompress(file) && stripMetadata;
const result = useCompression
? await uploader.media(file, onProgress)
: await uploader.upload(file, onProgress);
setResults((s) => [...s, result]);
if (type === "blossom") {
const uploader = new Blossom(url, pub);
const result = noCompress
? await uploader.upload(toUpload, onProgress)
: await uploader.media(toUpload, onProgress);
setResults((s) => [...s, result]);
}
if (type === "nip96") {
const uploader = new Nip96(url, pub);
await uploader.loadInfo();
const result = await uploader.upload(toUpload, onProgress);
setResults((s) => [...s, result]);
}
} catch (e) {
if (e instanceof Error) {
setError(e.message || "Upload failed - no error details provided");
@ -70,33 +71,12 @@ export default function Upload() {
}
}
async function handleFileSelection() {
if (isUploading) return;
try {
const files = await openFiles();
if (!files || files.length === 0) return;
// Start uploading each file immediately
for (let i = 0; i < files.length; i++) {
const file = files[i];
await doUpload(file);
}
} catch (e) {
if (e instanceof Error) {
setError(e.message || "File selection failed");
} else {
setError("File selection failed");
}
}
}
const listUploads = useCallback(
async (n: number) => {
if (!pub) return;
try {
setError(undefined);
const uploader = new Nip96(ServerUrl, pub);
const uploader = new Nip96(url, pub);
await uploader.loadInfo();
const result = await uploader.listFiles(n, 50);
setListedFiles(result);
@ -112,14 +92,14 @@ export default function Upload() {
}
}
},
[pub],
[pub, url],
);
async function deleteFile(id: string) {
if (!pub) return;
try {
setError(undefined);
const uploader = new Blossom(ServerUrl, pub);
const uploader = new Blossom(url, pub);
await uploader.delete(id);
} catch (e) {
if (e instanceof Error) {
@ -140,10 +120,10 @@ export default function Upload() {
useEffect(() => {
if (pub && !self) {
const r96 = new Route96(ServerUrl, pub);
const r96 = new Route96(url, pub);
r96.getSelf().then((v) => setSelf(v.data));
}
}, [pub, self]);
}, [pub, self, url]);
if (!login) {
return (
@ -159,303 +139,385 @@ export default function Upload() {
}
return (
<div className="w-full px-4">
<div className="max-w-4xl mx-auto space-y-8">
{error && (
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg mb-6">
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
{error}
</div>
)}
<div className="flex flex-wrap gap-6">
{/* Upload Widget */}
<div className="card flex-1 min-w-80">
<h2 className="text-xl font-semibold mb-6">Upload Files</h2>
<div className="card">
<h2 className="text-xl font-semibold mb-6">Upload Settings</h2>
<div className="space-y-6">
<div>
<div className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-300 mb-3">
Upload Method
</label>
<div className="flex gap-6">
<label className="flex items-center cursor-pointer">
<input
type="checkbox"
checked={stripMetadata}
onChange={(e) => setStripMetadata(e.target.checked)}
type="radio"
checked={type === "blossom"}
onChange={() => setType("blossom")}
className="mr-2"
/>
<span className="text-sm font-medium text-gray-300">
Strip metadata (for images)
Blossom
</span>
</label>
<label className="flex items-center cursor-pointer">
<input
type="radio"
checked={type === "nip96"}
onChange={() => setType("nip96")}
className="mr-2"
/>
<span className="text-sm font-medium text-gray-300">
NIP-96
</span>
</label>
</div>
{/* Upload Progress */}
{isUploading && uploadProgress && (
<ProgressBar
progress={uploadProgress}
/>
)}
<div className="flex gap-4">
<Button
onClick={handleFileSelection}
className="btn-primary flex-1"
disabled={isUploading}
>
{isUploading ? "Uploading..." : "Select Files to Upload"}
</Button>
</div>
</div>
</div>
{/* Storage Usage Widget */}
{self && (
<div className="card flex-1 min-w-80">
<h3 className="text-lg font-semibold mb-4">Storage Usage</h3>
<div className="space-y-4">
{/* File Count */}
<div className="flex justify-between text-sm">
<span>Files:</span>
<span className="font-medium">
{self.file_count.toLocaleString()}
</span>
</div>
<div>
<label className="flex items-center cursor-pointer">
<input
type="checkbox"
checked={noCompress}
onChange={(e) => setNoCompress(e.target.checked)}
className="mr-2"
/>
<span className="text-sm font-medium text-gray-300">
Disable Compression
</span>
</label>
</div>
{/* Total Usage */}
<div className="flex justify-between text-sm">
<span>Total Size:</span>
<span className="font-medium">
{FormatBytes(self.total_size)}
</span>
</div>
{/* Only show quota information if available */}
{self.total_available_quota && self.total_available_quota > 0 && (
<>
{/* Progress Bar */}
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Quota Used:</span>
<span className="font-medium">
{FormatBytes(self.total_size)} of{" "}
{FormatBytes(self.total_available_quota)}
</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2.5">
<div
className={`h-2.5 rounded-full transition-all duration-300 ${self.total_size / self.total_available_quota > 0.8
? "bg-red-500"
: self.total_size / self.total_available_quota > 0.6
? "bg-yellow-500"
: "bg-green-500"
}`}
style={{
width: `${Math.min(100, (self.total_size / self.total_available_quota) * 100)}%`,
}}
></div>
</div>
<div className="flex justify-between text-xs text-gray-400">
<span>
{(
(self.total_size / self.total_available_quota) *
100
).toFixed(1)}
% used
</span>
<span
className={`${self.total_size / self.total_available_quota > 0.8
? "text-red-400"
: self.total_size / self.total_available_quota > 0.6
? "text-yellow-400"
: "text-green-400"
}`}
>
{FormatBytes(
Math.max(
0,
self.total_available_quota - self.total_size,
),
)}{" "}
remaining
</span>
</div>
</div>
{/* Quota Breakdown - excluding free quota */}
<div className="space-y-2 pt-2 border-t border-gray-700">
{(self.quota ?? 0) > 0 && (
<div className="flex justify-between text-sm">
<span>Paid Quota:</span>
<span className="font-medium">
{FormatBytes(self.quota!)}
</span>
</div>
)}
{(self.paid_until ?? 0) > 0 && (
<div className="flex justify-between text-sm">
<span>Expires:</span>
<div className="text-right">
<div className="font-medium">
{new Date(
self.paid_until! * 1000,
).toLocaleDateString()}
</div>
<div className="text-xs text-gray-400">
{(() => {
const now = Date.now() / 1000;
const daysLeft = Math.max(
0,
Math.ceil(
(self.paid_until! - now) / (24 * 60 * 60),
),
);
return daysLeft > 0
? `${daysLeft} days left`
: "Expired";
})()}
</div>
</div>
</div>
)}
</div>
</>
)}
{toUpload && (
<div className="border-2 border-dashed border-gray-600 rounded-lg p-4">
<FileList files={[toUpload]} />
</div>
)}
{/* Upload Progress */}
{isUploading && uploadProgress && (
<ProgressBar
progress={uploadProgress}
fileName={toUpload?.name}
/>
)}
<div className="flex gap-4">
<Button
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
className="btn-primary w-full mt-4"
onClick={async () => {
const f = await openFile();
setToUpload(f);
}}
className="btn-secondary flex-1"
disabled={isUploading}
>
{showPaymentFlow ? "Hide" : "Show"} Payment Options
Choose File
</Button>
<Button
onClick={doUpload}
disabled={!toUpload || isUploading}
className="btn-primary flex-1"
>
{isUploading ? "Uploading..." : "Upload"}
</Button>
</div>
)}
</div>
</div>
{/* Payment Flow Widget */}
{showPaymentFlow && pub && (
<div className="card flex-1 min-w-80">
<PaymentFlow
route96={new Route96(ServerUrl, pub)}
onPaymentRequested={(pr) => {
console.log("Payment requested:", pr);
}}
userInfo={self}
/>
</div>
)}
{self && (
<div className="card max-w-2xl mx-auto">
<h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
<div className="space-y-4">
{self.total_available_quota && self.total_available_quota > 0 && (
<>
{/* File Count */}
<div className="flex justify-between text-sm">
<span>Files:</span>
<span className="font-medium">
{self.file_count.toLocaleString()}
</span>
</div>
{/* Mirror Suggestions Widget */}
{blossomServers && blossomServers.length > 1 && (
<div className="w-full">
<MirrorSuggestions
servers={blossomServers}
/>
</div>
)}
{/* Progress Bar */}
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Used:</span>
<span className="font-medium">
{FormatBytes(self.total_size)} of{" "}
{FormatBytes(self.total_available_quota)}
</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2.5">
<div
className={`h-2.5 rounded-full transition-all duration-300 ${
self.total_size / self.total_available_quota > 0.8
? "bg-red-500"
: self.total_size / self.total_available_quota > 0.6
? "bg-yellow-500"
: "bg-green-500"
}`}
style={{
width: `${Math.min(100, (self.total_size / self.total_available_quota) * 100)}%`,
}}
></div>
</div>
<div className="flex justify-between text-xs text-gray-400">
<span>
{(
(self.total_size / self.total_available_quota) *
100
).toFixed(1)}
% used
</span>
<span
className={`${
self.total_size / self.total_available_quota > 0.8
? "text-red-400"
: self.total_size / self.total_available_quota > 0.6
? "text-yellow-400"
: "text-green-400"
}`}
>
{FormatBytes(
Math.max(
0,
self.total_available_quota - self.total_size,
),
)}{" "}
remaining
</span>
</div>
</div>
{/* Files Widget */}
<div className="card w-full">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold">Your Files</h2>
{!listedFiles && (
<Button onClick={() => listUploads(0)} className="btn-primary">
Load Files
</Button>
{/* Quota Breakdown */}
<div className="space-y-2 pt-2 border-t border-gray-700">
{self.free_quota && self.free_quota > 0 && (
<div className="flex justify-between text-sm">
<span>Free Quota:</span>
<span className="font-medium">
{FormatBytes(self.free_quota)}
</span>
</div>
)}
{(self.quota ?? 0) > 0 && (
<div className="flex justify-between text-sm">
<span>Paid Quota:</span>
<span className="font-medium">
{FormatBytes(self.quota!)}
</span>
</div>
)}
{(self.paid_until ?? 0) > 0 && (
<div className="flex justify-between text-sm">
<span>Expires:</span>
<div className="text-right">
<div className="font-medium">
{new Date(
self.paid_until! * 1000,
).toLocaleDateString()}
</div>
<div className="text-xs text-gray-400">
{(() => {
const now = Date.now() / 1000;
const daysLeft = Math.max(
0,
Math.ceil(
(self.paid_until! - now) / (24 * 60 * 60),
),
);
return daysLeft > 0
? `${daysLeft} days left`
: "Expired";
})()}
</div>
</div>
</div>
)}
</div>
</>
)}
{(!self.total_available_quota ||
self.total_available_quota === 0) && (
<div className="text-center py-4 text-gray-400">
<p>No quota information available</p>
<p className="text-sm">
Contact administrator for storage access
</p>
</div>
)}
</div>
<Button
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
className="btn-primary w-full mt-4"
>
{showPaymentFlow ? "Hide" : "Show"} Payment Options
</Button>
</div>
)}
{listedFiles && (
<FileList
files={listedFiles.files}
pages={Math.ceil(listedFiles.total / listedFiles.count)}
page={listedFiles.page}
onPage={(x) => setListedPage(x)}
onDelete={async (x) => {
await deleteFile(x);
await listUploads(listedPage);
}}
/>
{showPaymentFlow && pub && (
<div className="card">
<PaymentFlow
route96={new Route96(url, pub)}
onPaymentRequested={(pr) => {
console.log("Payment requested:", pr);
}}
userInfo={self}
/>
</div>
)}
<div className="card">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold">Your Files</h2>
{!listedFiles && (
<Button onClick={() => listUploads(0)} className="btn-primary">
Load Files
</Button>
)}
</div>
{/* Upload Results Widget */}
{results.length > 0 && (
<div className="card w-full">
<h3 className="text-lg font-semibold mb-4">Upload Results</h3>
<div className="space-y-4">
{results.map((result, index) => (
<div
key={index}
className="bg-gray-800 border border-gray-700 rounded-lg p-4"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<h4 className="font-medium text-green-400 mb-1">
Upload Successful
</h4>
<p className="text-sm text-gray-400">
{new Date(
(result.uploaded || Date.now() / 1000) * 1000,
).toLocaleString()}
</p>
</div>
<div className="text-right">
<span className="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">
{result.type || "Unknown type"}
</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<p className="text-sm text-gray-400">File Size</p>
<p className="font-medium">
{FormatBytes(result.size || 0)}
</p>
</div>
</div>
<div className="space-y-2">
{result.url && (
<div>
<p className="text-sm text-gray-400 mb-1">File URL</p>
<div className="flex items-center gap-2">
<code className="text-xs bg-gray-900 text-green-400 px-2 py-1 rounded flex-1 overflow-hidden">
{result.url}
</code>
<button
onClick={() =>
navigator.clipboard.writeText(result.url!)
}
className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
title="Copy URL"
>
Copy
</button>
</div>
</div>
)}
<div>
<p className="text-sm text-gray-400 mb-1">
File Hash (SHA256)
</p>
<code className="text-xs bg-gray-900 text-gray-400 px-2 py-1 rounded block overflow-hidden">
{result.sha256}
</code>
</div>
</div>
<details className="mt-4">
<summary className="text-sm text-gray-400 cursor-pointer hover:text-gray-300">
Show raw JSON data
</summary>
<pre className="text-xs bg-gray-900 text-gray-300 p-3 rounded mt-2 overflow-auto">
{JSON.stringify(result, undefined, 2)}
</pre>
</details>
</div>
))}
</div>
</div>
{listedFiles && (
<FileList
files={listedFiles.files}
pages={Math.ceil(listedFiles.total / listedFiles.count)}
page={listedFiles.page}
onPage={(x) => setListedPage(x)}
onDelete={async (x) => {
await deleteFile(x);
await listUploads(listedPage);
}}
/>
)}
</div>
{results.length > 0 && (
<div className="card">
<h3 className="text-lg font-semibold mb-4">Upload Results</h3>
<div className="space-y-4">
{results.map((result: any, index) => (
<div
key={index}
className="bg-gray-800 border border-gray-700 rounded-lg p-4"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<h4 className="font-medium text-green-400 mb-1">
Upload Successful
</h4>
<p className="text-sm text-gray-400">
{new Date(
(result.uploaded || Date.now() / 1000) * 1000,
).toLocaleString()}
</p>
</div>
<div className="text-right">
<span className="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">
{result.type || "Unknown type"}
</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<p className="text-sm text-gray-400">File Size</p>
<p className="font-medium">
{FormatBytes(result.size || 0)}
</p>
</div>
{result.nip94?.find((tag: any[]) => tag[0] === "dim") && (
<div>
<p className="text-sm text-gray-400">Dimensions</p>
<p className="font-medium">
{
result.nip94.find(
(tag: any[]) => tag[0] === "dim",
)?.[1]
}
</p>
</div>
)}
</div>
<div className="space-y-2">
<div>
<p className="text-sm text-gray-400 mb-1">File URL</p>
<div className="flex items-center gap-2">
<code className="text-xs bg-gray-900 text-green-400 px-2 py-1 rounded flex-1 overflow-hidden">
{result.url}
</code>
<button
onClick={() =>
navigator.clipboard.writeText(result.url)
}
className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
title="Copy URL"
>
Copy
</button>
</div>
</div>
{result.nip94?.find((tag: any[]) => tag[0] === "thumb") && (
<div>
<p className="text-sm text-gray-400 mb-1">
Thumbnail URL
</p>
<div className="flex items-center gap-2">
<code className="text-xs bg-gray-900 text-blue-400 px-2 py-1 rounded flex-1 overflow-hidden">
{
result.nip94.find(
(tag: any[]) => tag[0] === "thumb",
)?.[1]
}
</code>
<button
onClick={() =>
navigator.clipboard.writeText(
result.nip94.find(
(tag: any[]) => tag[0] === "thumb",
)?.[1],
)
}
className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
title="Copy Thumbnail URL"
>
Copy
</button>
</div>
</div>
)}
<div>
<p className="text-sm text-gray-400 mb-1">
File Hash (SHA256)
</p>
<code className="text-xs bg-gray-900 text-gray-400 px-2 py-1 rounded block overflow-hidden">
{result.sha256}
</code>
</div>
</div>
<details className="mt-4">
<summary className="text-sm text-gray-400 cursor-pointer hover:text-gray-300">
Show raw JSON data
</summary>
<pre className="text-xs bg-gray-900 text-gray-300 p-3 rounded mt-2 overflow-auto">
{JSON.stringify(result, undefined, 2)}
</pre>
</details>
</div>
))}
</div>
</div>
)}
</div>
);
}

View File

@ -1 +1 @@
{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/mirror-suggestions.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/components/progress-bar.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/hooks/use-blossom-servers.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/upload/progress.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}
{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/components/progress-bar.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/upload/progress.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}