278 lines
12 KiB
TypeScript
278 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
|
const CHUNK_SIZE = 8 * 1024 * 1024; // 8 MB
|
|
const PARALLEL_UPLOADS = 4;
|
|
|
|
function bufferToBase64(buffer: ArrayBuffer) {
|
|
let binary = '';
|
|
const bytes = new Uint8Array(buffer);
|
|
const len = bytes.byteLength;
|
|
for (let i = 0; i < len; i++) {
|
|
binary += String.fromCharCode(bytes[i]);
|
|
}
|
|
return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
|
|
}
|
|
|
|
function formatTime(seconds: number) {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = Math.floor(seconds % 60);
|
|
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function formatBytes(bytes: number, decimals = 2) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const dm = decimals < 0 ? 0 : decimals;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
|
}
|
|
|
|
export default function Home() {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const [uploadState, setUploadState] = useState<'idle' | 'processing' | 'uploading' | 'complete'>('idle');
|
|
const [progress, setProgress] = useState(0);
|
|
const [downloadUrl, setDownloadUrl] = useState('');
|
|
const [uploadedSize, setUploadedSize] = useState(0);
|
|
const [uploadSpeed, setUploadSpeed] = useState(0);
|
|
const [elapsedTime, setElapsedTime] = useState(0);
|
|
const [etr, setEtr] = useState(0);
|
|
const [copyState, setCopyState] = useState<'idle' | 'copied'>('idle');
|
|
|
|
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
|
const lastUploadedSizeRef = useRef(0);
|
|
const uploadedSizeRef = useRef(0);
|
|
|
|
useEffect(() => {
|
|
uploadedSizeRef.current = uploadedSize;
|
|
}, [uploadedSize]);
|
|
|
|
useEffect(() => {
|
|
if (uploadState === 'uploading') {
|
|
const startTime = Date.now();
|
|
lastUploadedSizeRef.current = 0;
|
|
|
|
timerRef.current = setInterval(() => {
|
|
setElapsedTime((Date.now() - startTime) / 1000);
|
|
const currentUploadedSize = uploadedSizeRef.current;
|
|
const speed = currentUploadedSize - lastUploadedSizeRef.current;
|
|
setUploadSpeed(speed > 0 ? speed : 0);
|
|
|
|
if (speed > 0 && selectedFile) {
|
|
const remainingSize = selectedFile.size - currentUploadedSize;
|
|
setEtr(remainingSize / speed);
|
|
}
|
|
lastUploadedSizeRef.current = currentUploadedSize;
|
|
}, 1000);
|
|
} else if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
setUploadSpeed(0);
|
|
}
|
|
|
|
return () => {
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
}
|
|
};
|
|
}, [uploadState, selectedFile]);
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = event.target.files;
|
|
if (files && files.length > 0) {
|
|
handleFileSelect(files[0]);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
|
event.preventDefault();
|
|
const files = event.dataTransfer.files;
|
|
if (files && files.length > 0) {
|
|
handleFileSelect(files[0]);
|
|
}
|
|
};
|
|
|
|
const handleFileSelect = (file: File) => {
|
|
setSelectedFile(file);
|
|
startUploadProcess(file).catch(console.error);
|
|
}
|
|
|
|
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
|
event.preventDefault();
|
|
};
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(downloadUrl);
|
|
setCopyState('copied');
|
|
setTimeout(() => setCopyState('idle'), 2000);
|
|
};
|
|
|
|
const startUploadProcess = async (file: File) => {
|
|
if (!file) return;
|
|
|
|
setUploadState('processing');
|
|
setProgress(0);
|
|
setDownloadUrl('');
|
|
setUploadedSize(0);
|
|
setElapsedTime(0);
|
|
setEtr(0);
|
|
|
|
const fileKey = await window.crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
|
|
const numParts = Math.ceil(file.size / CHUNK_SIZE);
|
|
const createResponse = await fetch('/api/create-file', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ filename: file.name, size: file.size, num_parts: numParts }),
|
|
});
|
|
const { file_id } = await createResponse.json();
|
|
|
|
setUploadState('uploading');
|
|
const chunks: { index: number; data: Blob }[] = [];
|
|
for (let i = 0; i < numParts; i++) {
|
|
const start = i * CHUNK_SIZE;
|
|
const end = Math.min(start + CHUNK_SIZE, file.size);
|
|
const chunk = file.slice(start, end);
|
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
|
const encryptedChunk = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: iv }, fileKey, await chunk.arrayBuffer());
|
|
const combinedData = new Blob([iv, new Uint8Array(encryptedChunk)]);
|
|
chunks.push({ index: i, data: combinedData });
|
|
}
|
|
|
|
let uploadedCount = 0;
|
|
const uploadChunk = async (chunk: { index: number; data: Blob }) => {
|
|
const formData = new FormData();
|
|
formData.append('file_id', file_id);
|
|
formData.append('part_index', chunk.index.toString());
|
|
formData.append('encrypted_chunk', chunk.data);
|
|
await fetch('/api/upload-part', { method: 'POST', body: formData });
|
|
uploadedCount++;
|
|
const currentSize = uploadedCount * CHUNK_SIZE > file.size ? file.size : uploadedCount * CHUNK_SIZE;
|
|
setUploadedSize(currentSize);
|
|
setProgress(Math.round((uploadedCount / numParts) * 100));
|
|
};
|
|
|
|
const queue = [...chunks];
|
|
const active: Promise<void>[] = [];
|
|
while (queue.length > 0 || active.length > 0) {
|
|
while (active.length < PARALLEL_UPLOADS && queue.length > 0) {
|
|
const task = queue.shift()!;
|
|
const promise = uploadChunk(task).finally(() => {
|
|
const index = active.indexOf(promise);
|
|
if (index > -1) active.splice(index, 1);
|
|
});
|
|
active.push(promise);
|
|
}
|
|
await Promise.race(active);
|
|
}
|
|
|
|
const completeResponse = await fetch('/api/complete-upload', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ file_id }),
|
|
});
|
|
const { download_token } = await completeResponse.json();
|
|
|
|
const exportedKey = await window.crypto.subtle.exportKey('raw', fileKey);
|
|
const keyString = bufferToBase64(exportedKey);
|
|
setUploadState('complete');
|
|
setDownloadUrl(`${window.location.origin}/download/${file_id}?token=${download_token}#${keyString}`);
|
|
};
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-900 text-white font-sans">
|
|
<div className="w-full max-w-xl">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold">LockLoad</h1>
|
|
<p className="text-lg text-gray-400">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
|
|
</div>
|
|
|
|
<div className="w-full bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
|
|
{uploadState === 'idle' && (
|
|
<div
|
|
onDrop={handleDrop}
|
|
onDragOver={handleDragOver}
|
|
className="border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-blue-400 hover:bg-gray-700/50 transition-colors duration-300"
|
|
>
|
|
<input type="file" className="hidden" id="file-upload" onChange={handleFileChange} />
|
|
<label htmlFor="file-upload" className="flex flex-col items-center justify-center cursor-pointer space-y-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
<p className="text-xl font-semibold">Drag & drop your file here</p>
|
|
<p className="text-gray-500">or click to select a file</p>
|
|
</label>
|
|
</div>
|
|
)}
|
|
|
|
{(uploadState === 'processing' || uploadState === 'uploading') && (
|
|
<div className="w-full space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold">Uploading...</h2>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h5" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 20v-5h-5" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 20v-5h5" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 4v5h-5" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-gray-400 truncate text-center">{selectedFile?.name}</p>
|
|
|
|
<div className="space-y-2">
|
|
<div className="bg-gray-700 rounded-full h-4 w-full overflow-hidden">
|
|
<div className="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full transition-all duration-300 ease-in-out" style={{ width: `${progress}%` }}></div>
|
|
</div>
|
|
<div className="flex justify-between text-sm font-mono text-gray-300">
|
|
<span>{progress}%</span>
|
|
<span>{formatBytes(uploadedSize)} / {selectedFile ? formatBytes(selectedFile.size) : '0 Bytes'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 text-center text-sm font-mono text-gray-400 pt-2">
|
|
<div>
|
|
<p className="font-semibold">Speed</p>
|
|
<p>{formatBytes(uploadSpeed)}/s</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold">Elapsed</p>
|
|
<p>{formatTime(elapsedTime)}</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold">ETR</p>
|
|
<p>{etr > 0 && etr < Infinity ? formatTime(etr) : '--:--'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{uploadState === 'complete' && (
|
|
<div className="text-center space-y-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h2 className="text-2xl font-bold text-green-400">Upload Complete!</h2>
|
|
<p className="text-gray-300">Your file is ready. Save the link below.</p>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
readOnly
|
|
value={downloadUrl}
|
|
className="w-full p-3 pr-28 bg-gray-900 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
|
|
/>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="absolute inset-y-0 right-0 flex items-center px-4 bg-blue-600 hover:bg-blue-700 rounded-r-lg text-white font-semibold transition-colors duration-300"
|
|
>
|
|
{copyState === 'copied' ? 'Copied!' : 'Copy'}
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-gray-500">This link contains the decryption key. Keep it safe!</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|