feat: Enhance download page with progress tracking and file deletion functionality

src/app/api/cron/cleanup/route.ts

@@ -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,43 +14,75 @@ 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) {
+      if (expiredFiles.length > 0) {
-        return NextResponse.json({ success: true, message: 'No expired files to clean up.' });
+        for (const file of expiredFiles) {
+          const file_id = file.id;
+
+          const [partsRows]: any[] = await connection.query(
+            'SELECT discord_message_id FROM file_parts WHERE file_id = ?',
+            [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}` },
+              });
+            });
+            await Promise.allSettled(deletePromises);
+          }
+
+          await connection.query('UPDATE files SET deleted = 1 WHERE id = ?', [file_id]);
+          totalCleanedExpired++;
+        }
       }
 
-      let totalCleaned = 0;
+      const message = `Cleanup complete. Incomplete cleaned: ${totalCleanedIncomplete}. Expired cleaned: ${totalCleanedExpired}.`;
-
+      return NextResponse.json({ success: true, message });
-      // 3. For each expired file, delete parts and mark as deleted
-      for (const file of expiredFiles) {
-        const file_id = file.id;
-
-        const [partsRows]: any[] = await connection.query(
-          'SELECT discord_message_id FROM file_parts WHERE file_id = ?',
-          [file_id]
-        );
-
-        const deletePromises = partsRows.map((part: { discord_message_id: string }) => {
-          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('UPDATE files SET deleted = 1 WHERE id = ?', [file_id]);
-        totalCleaned++;
-      }
-
-      return NextResponse.json({ success: true, message: `Cleaned up ${totalCleaned} expired files.` });
 
     } finally {
       connection.release();
@@ -61,4 +92,4 @@ export async function POST(request: Request) {
     console.error('Error during cron cleanup:', error);
     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
   }
-}
+}

src/app/download/[file_id]/page.tsx

@@ -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++;
+                    setDownloadedBytes(prev => prev + buffer.byteLength);
-                    setProgress(Math.round((downloadedCount / metadata.num_parts) * 50));
+                    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(prev => prev + (1 / metadata.num_parts) * 50);
-                    setProgress(50 + Math.round((decryptedCount / 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">
+        <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-md text-center">
+            <div className="w-full max-w-lg bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
-                {downloadState !== 'error' && downloadState !== 'complete' && (
+                {deleteState !== 'deleted' ? (
                     <>
-                        <h1 className="text-3xl font-bold mb-4">Downloading File</h1>
+                        {downloadState !== 'error' && downloadState !== 'complete' && (
-                        <p className="mb-2 truncate">{filename}</p>
+                            <>
-                        <div className="bg-gray-700 rounded-full h-6 w-full">
+                                <div className="flex items-center justify-between">
-                            <div className="bg-green-600 h-6 rounded-full transition-width duration-300 flex items-center justify-center" style={{ width: `${progress}%` }}>
+                                    <h1 className="text-2xl font-bold">Downloading File</h1>
-                                {progress}%
+                                    <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>
+
+                                <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' && (
+                            <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>
-                        </div>
+                        )}
-                        <p className="mt-2 text-sm text-gray-400">
+                        {downloadState === 'error' && (
-                            {downloadState === 'downloading' && 'Downloading parts...'}
+                            <div className="text-center space-y-4">
-                            {downloadState === 'decrypting' && 'Decrypting and assembling file...'}
+                                <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">
-                        </p>
+                                    <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>
-                {downloadState === 'complete' && (
+                                <p className="text-red-400 bg-red-900/50 p-4 rounded-lg font-mono">{error}</p>
-                    <>
+                            </div>
-                        <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>
+                        {filename && (
-                    </>
+                             <div className="mt-6 pt-6 border-t border-gray-700">
-                )}
+                                {deleteState === 'idle' && (
-                {downloadState === 'error' && (
+                                    <button
-                    <>
+                                        onClick={handleDelete}
-                        <h1 className="text-3xl font-bold mb-4 text-red-500">Download Failed</h1>
+                                        disabled={downloadState === 'downloading' || downloadState === 'decrypting' || deleteState === 'deleting'}
-                        <p className="text-red-400 bg-red-900/50 p-3 rounded-md">{error}</p>
+                                        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>