feat: Enhance download page with progress tracking and file deletion functionality
This commit is contained in:
@@ -7,7 +7,6 @@ if (!process.env.DISCORD_BOT_TOKEN || !process.env.DISCORD_CHANNEL_ID || !proces
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
// 1. Authenticate the cron job request
|
||||
const authHeader = request.headers.get('authorization');
|
||||
if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
@@ -15,18 +14,48 @@ export async function POST(request: Request) {
|
||||
|
||||
const connection = await pool.getConnection();
|
||||
try {
|
||||
// 2. Find expired files
|
||||
let totalCleanedExpired = 0;
|
||||
let totalCleanedIncomplete = 0;
|
||||
|
||||
// --- 1. Cleanup for INCOMPLETE uploads ---
|
||||
const staleTime = new Date();
|
||||
staleTime.setHours(staleTime.getHours() - 24); // Older than 24 hours
|
||||
|
||||
const [incompleteFiles]: any[] = await connection.query(
|
||||
'SELECT id FROM files WHERE token_hash IS NULL AND upload_at <= ?',
|
||||
[staleTime]
|
||||
);
|
||||
|
||||
if (incompleteFiles.length > 0) {
|
||||
for (const file of incompleteFiles) {
|
||||
const file_id = file.id;
|
||||
|
||||
const [parts]: any[] = await connection.query('SELECT discord_message_id FROM file_parts WHERE file_id = ?', [file_id]);
|
||||
|
||||
if (parts.length > 0) {
|
||||
const deletePromises = parts.map((part: { discord_message_id: string }) => {
|
||||
if (!part.discord_message_id) return Promise.resolve();
|
||||
const deleteUrl = `https://discord.com/api/v10/channels/${process.env.DISCORD_CHANNEL_ID}/messages/${part.discord_message_id}`;
|
||||
return fetch(deleteUrl, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}` },
|
||||
});
|
||||
});
|
||||
await Promise.allSettled(deletePromises);
|
||||
}
|
||||
|
||||
await connection.query('DELETE FROM file_parts WHERE file_id = ?', [file_id]);
|
||||
await connection.query('DELETE FROM files WHERE id = ?', [file_id]);
|
||||
totalCleanedIncomplete++;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 2. Cleanup for EXPIRED files ---
|
||||
const [expiredFiles]: any[] = await connection.query(
|
||||
'SELECT id FROM files WHERE expires_at <= NOW() AND deleted = 0'
|
||||
);
|
||||
|
||||
if (expiredFiles.length === 0) {
|
||||
return NextResponse.json({ success: true, message: 'No expired files to clean up.' });
|
||||
}
|
||||
|
||||
let totalCleaned = 0;
|
||||
|
||||
// 3. For each expired file, delete parts and mark as deleted
|
||||
if (expiredFiles.length > 0) {
|
||||
for (const file of expiredFiles) {
|
||||
const file_id = file.id;
|
||||
|
||||
@@ -35,23 +64,25 @@ export async function POST(request: Request) {
|
||||
[file_id]
|
||||
);
|
||||
|
||||
if (partsRows.length > 0) {
|
||||
const deletePromises = partsRows.map((part: { discord_message_id: string }) => {
|
||||
if (!part.discord_message_id) return Promise.resolve();
|
||||
const deleteUrl = `https://discord.com/api/v10/channels/${process.env.DISCORD_CHANNEL_ID}/messages/${part.discord_message_id}`;
|
||||
return fetch(deleteUrl, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}`,
|
||||
}
|
||||
headers: { 'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}` },
|
||||
});
|
||||
});
|
||||
|
||||
await Promise.allSettled(deletePromises);
|
||||
}
|
||||
|
||||
await connection.query('UPDATE files SET deleted = 1 WHERE id = ?', [file_id]);
|
||||
totalCleaned++;
|
||||
totalCleanedExpired++;
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, message: `Cleaned up ${totalCleaned} expired files.` });
|
||||
const message = `Cleanup complete. Incomplete cleaned: ${totalCleanedIncomplete}. Expired cleaned: ${totalCleanedExpired}.`;
|
||||
return NextResponse.json({ success: true, message });
|
||||
|
||||
} finally {
|
||||
connection.release();
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { useParams, useSearchParams } from 'next/navigation';
|
||||
|
||||
// Helper to convert Base64 string back to ArrayBuffer
|
||||
@@ -14,6 +14,17 @@ function base64ToBuffer(base64: string) {
|
||||
return bytes.buffer;
|
||||
}
|
||||
|
||||
// Helper to format bytes into a human-readable string
|
||||
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];
|
||||
}
|
||||
|
||||
|
||||
// New helper function to handle retries for failed fetches
|
||||
async function fetchWithRetry(url: string, retries: number = 3, delay: number = 1000): Promise<Response> {
|
||||
for (let i = 0; i < retries; i++) {
|
||||
@@ -22,14 +33,11 @@ async function fetchWithRetry(url: string, retries: number = 3, delay: number =
|
||||
if (response.ok) {
|
||||
return response;
|
||||
}
|
||||
// Don't retry on client errors (e.g., 404), but do on server errors (5xx)
|
||||
if (response.status >= 400 && response.status < 500) {
|
||||
throw new Error(`Client error: ${response.status} for URL ${url}`);
|
||||
}
|
||||
// For server errors or network issues, log and prepare to retry
|
||||
console.warn(`Attempt ${i + 1} failed for ${url} with status ${response.status}. Retrying in ${delay}ms...`);
|
||||
} catch (error) {
|
||||
// This catches network errors (e.g., no internet) and the thrown client error
|
||||
console.warn(`Attempt ${i + 1} failed for ${url}. Error: ${error}. Retrying in ${delay}ms...`);
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, delay * (i + 1))); // Exponential backoff
|
||||
@@ -39,13 +47,40 @@ async function fetchWithRetry(url: string, retries: number = 3, delay: number =
|
||||
|
||||
export default function DownloadPage() {
|
||||
const [downloadState, setDownloadState] = useState<'idle' | 'downloading' | 'decrypting' | 'complete' | 'error'>('idle');
|
||||
const [deleteState, setDeleteState] = useState<'idle' | 'deleting' | 'deleted' | 'error'>('idle');
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [error, setError] = useState('');
|
||||
const [deleteError, setDeleteError] = useState('');
|
||||
const [filename, setFilename] = useState('');
|
||||
const [downloadedBytes, setDownloadedBytes] = useState(0);
|
||||
const [totalBytes, setTotalBytes] = useState(0);
|
||||
const [downloadSpeed, setDownloadSpeed] = useState(0); // bytes per second
|
||||
|
||||
const downloadedBytesRef = useRef(downloadedBytes);
|
||||
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
downloadedBytesRef.current = downloadedBytes;
|
||||
}, [downloadedBytes]);
|
||||
|
||||
useEffect(() => {
|
||||
if (downloadState !== 'downloading') {
|
||||
setDownloadSpeed(0);
|
||||
return;
|
||||
}
|
||||
let lastBytes = downloadedBytesRef.current;
|
||||
const interval = setInterval(() => {
|
||||
const currentBytes = downloadedBytesRef.current;
|
||||
const speed = currentBytes - lastBytes;
|
||||
setDownloadSpeed(speed);
|
||||
lastBytes = currentBytes;
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [downloadState]);
|
||||
|
||||
useEffect(() => {
|
||||
const startDownload = async () => {
|
||||
const file_id = params.file_id as string;
|
||||
@@ -59,7 +94,6 @@ export default function DownloadPage() {
|
||||
}
|
||||
|
||||
try {
|
||||
// 1. Fetch file metadata
|
||||
const metaRes = await fetch(`/api/file/${file_id}?token=${token}`);
|
||||
if (!metaRes.ok) {
|
||||
const err = await metaRes.json();
|
||||
@@ -67,24 +101,24 @@ export default function DownloadPage() {
|
||||
}
|
||||
const metadata = await metaRes.json();
|
||||
setFilename(metadata.filename);
|
||||
setTotalBytes(metadata.size);
|
||||
|
||||
// 2. Download all parts in parallel
|
||||
setDownloadState('downloading');
|
||||
const encryptedParts = new Array(metadata.num_parts);
|
||||
let downloadedCount = 0;
|
||||
|
||||
const downloadPromises = metadata.parts.map(async (part: any) => {
|
||||
const response = await fetchWithRetry(`/api/download-part/${file_id}/${part.part_index}`);
|
||||
const buffer = await response.arrayBuffer();
|
||||
encryptedParts[part.part_index] = { index: part.part_index, data: buffer };
|
||||
downloadedCount++;
|
||||
setProgress(Math.round((downloadedCount / metadata.num_parts) * 50));
|
||||
setDownloadedBytes(prev => prev + buffer.byteLength);
|
||||
setProgress(prev => prev + (1 / metadata.num_parts) * 50);
|
||||
});
|
||||
|
||||
await Promise.all(downloadPromises);
|
||||
|
||||
// 3. Import key and decrypt parts
|
||||
setDownloadState('decrypting');
|
||||
setProgress(50);
|
||||
|
||||
const fileKey = await window.crypto.subtle.importKey(
|
||||
'raw',
|
||||
base64ToBuffer(keyString),
|
||||
@@ -93,18 +127,15 @@ export default function DownloadPage() {
|
||||
['decrypt']
|
||||
);
|
||||
|
||||
let decryptedCount = 0;
|
||||
const decryptPromises = encryptedParts.map(async (part) => {
|
||||
const iv = part.data.slice(0, 12);
|
||||
const data = part.data.slice(12);
|
||||
const decrypted = await window.crypto.subtle.decrypt({ name: 'AES-GCM', iv }, fileKey, data);
|
||||
decryptedCount++;
|
||||
setProgress(50 + Math.round((decryptedCount / metadata.num_parts) * 50));
|
||||
setProgress(prev => prev + (1 / metadata.num_parts) * 50);
|
||||
return decrypted;
|
||||
});
|
||||
const decryptedParts = await Promise.all(decryptPromises);
|
||||
|
||||
// 4. Combine parts and trigger download
|
||||
const finalBlob = new Blob(decryptedParts);
|
||||
const url = window.URL.createObjectURL(finalBlob);
|
||||
const a = document.createElement('a');
|
||||
@@ -123,39 +154,118 @@ export default function DownloadPage() {
|
||||
}
|
||||
};
|
||||
|
||||
if(filename) return;
|
||||
startDownload();
|
||||
}, [params, searchParams]);
|
||||
}, [params, searchParams, filename]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!window.confirm(`Are you sure you want to permanently delete this file? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeleteState('deleting');
|
||||
const file_id = params.file_id as string;
|
||||
const token = searchParams.get('token');
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/delete', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ file_id, token }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || 'Failed to delete file.');
|
||||
}
|
||||
|
||||
setDeleteState('deleted');
|
||||
|
||||
} catch (e: any) {
|
||||
setDeleteState('error');
|
||||
setDeleteError(e.message || 'An unknown error occurred during deletion.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-900 text-white">
|
||||
<div className="w-full max-w-md text-center">
|
||||
<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-lg bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
|
||||
{deleteState !== 'deleted' ? (
|
||||
<>
|
||||
{downloadState !== 'error' && downloadState !== 'complete' && (
|
||||
<>
|
||||
<h1 className="text-3xl font-bold mb-4">Downloading File</h1>
|
||||
<p className="mb-2 truncate">{filename}</p>
|
||||
<div className="bg-gray-700 rounded-full h-6 w-full">
|
||||
<div className="bg-green-600 h-6 rounded-full transition-width duration-300 flex items-center justify-center" style={{ width: `${progress}%` }}>
|
||||
{progress}%
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Downloading File</h1>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-400 truncate">{filename || "Fetching filename..."}</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>{Math.round(progress)}%</span>
|
||||
<span>{formatBytes(downloadedBytes)} / {formatBytes(totalBytes)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-400">
|
||||
{downloadState === 'downloading' && 'Downloading parts...'}
|
||||
{downloadState === 'decrypting' && 'Decrypting and assembling file...'}
|
||||
</p>
|
||||
|
||||
<div className="text-center text-sm text-gray-400 pt-2">
|
||||
<p>{downloadState === 'downloading' && `Downloading... (${formatBytes(downloadSpeed)}/s)`}</p>
|
||||
<p>{downloadState === 'decrypting' && 'Decrypting and assembling file...'}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{downloadState === 'complete' && (
|
||||
<>
|
||||
<h1 className="text-3xl font-bold mb-4 text-green-400">Download Started!</h1>
|
||||
<p>Your file <span className="font-mono bg-gray-800 px-1 rounded">{filename}</span> should be in your downloads folder.</p>
|
||||
<p className="mt-4 text-sm text-gray-500">You can now close this page.</p>
|
||||
</>
|
||||
<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>
|
||||
<h1 className="text-2xl font-bold text-green-400">Download Started!</h1>
|
||||
<p className="text-gray-300">Your file <span className="font-mono bg-gray-700 px-2 py-1 rounded-md">{filename}</span> should be in your downloads folder.</p>
|
||||
<p className="mt-4 text-xs text-gray-500">You can now close this page.</p>
|
||||
</div>
|
||||
)}
|
||||
{downloadState === 'error' && (
|
||||
<>
|
||||
<h1 className="text-3xl font-bold mb-4 text-red-500">Download Failed</h1>
|
||||
<p className="text-red-400 bg-red-900/50 p-3 rounded-md">{error}</p>
|
||||
<div className="text-center space-y-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-red-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h1 className="text-2xl font-bold text-red-500">Download Failed</h1>
|
||||
<p className="text-red-400 bg-red-900/50 p-4 rounded-lg font-mono">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filename && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-700">
|
||||
{deleteState === 'idle' && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={downloadState === 'downloading' || downloadState === 'decrypting' || deleteState === 'deleting'}
|
||||
className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 disabled:bg-gray-600 disabled:cursor-not-allowed"
|
||||
>
|
||||
{deleteState === 'deleting' ? 'Deleting...' : 'Delete File'}
|
||||
</button>
|
||||
)}
|
||||
{deleteState === 'deleting' && (
|
||||
<p className="text-center text-yellow-400">Deleting file from servers...</p>
|
||||
)}
|
||||
{deleteState === 'error' && (
|
||||
<p className="text-center text-red-400 bg-red-900/50 p-3 rounded-md font-mono">{deleteError}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
<h1 className="text-2xl font-bold">File Deleted</h1>
|
||||
<p className="text-gray-300">The file <span className="font-mono bg-gray-700 px-2 py-1 rounded-md">{filename}</span> has been permanently deleted.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user