feat: Implement file upload and management system
- Created database schema for files and file parts. - Added API endpoint to create a new file and generate an upload token. - Implemented API endpoint to complete file uploads and generate a download token. - Developed cron job for cleaning up expired files and deleting associated Discord messages. - Added API endpoint for soft deletion of files and their parts. - Implemented API endpoint to fetch file metadata and parts for download. - Created API endpoint to upload file parts to Discord. - Developed a client-side download page to handle file decryption and assembly. - Established database connection pooling for efficient database operations.
This commit is contained in:
272
src/app/page.tsx
272
src/app/page.tsx
@@ -1,103 +1,179 @@
|
||||
import Image from "next/image";
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
const CHUNK_SIZE = 8 * 1024 * 1024; // 8 MB
|
||||
const PARALLEL_UPLOADS = 4;
|
||||
|
||||
// Helper to convert ArrayBuffer to Base64 string
|
||||
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, '');
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
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('');
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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 startUploadProcess = async (file: File) => {
|
||||
if (!file) return;
|
||||
|
||||
setUploadState('processing');
|
||||
setProgress(0);
|
||||
setDownloadUrl('');
|
||||
|
||||
// 1. Generate encryption key
|
||||
const fileKey = await window.crypto.subtle.generateKey(
|
||||
{ name: 'AES-GCM', length: 256 },
|
||||
true,
|
||||
['encrypt', 'decrypt']
|
||||
);
|
||||
|
||||
// 2. Call create-file API
|
||||
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();
|
||||
|
||||
// 3. Chunk and encrypt file
|
||||
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()
|
||||
);
|
||||
// Prepend IV to the encrypted data
|
||||
const combinedData = new Blob([iv, new Uint8Array(encryptedChunk)]);
|
||||
chunks.push({ index: i, data: combinedData });
|
||||
}
|
||||
|
||||
// 4. Upload parts with concurrency limit
|
||||
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++;
|
||||
setProgress(Math.round((uploadedCount / numParts) * 100));
|
||||
};
|
||||
|
||||
const queue = [...chunks];
|
||||
const active = [];
|
||||
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);
|
||||
}
|
||||
|
||||
// 5. Complete upload
|
||||
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();
|
||||
|
||||
// 6. Generate and show download link
|
||||
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-24 bg-gray-900 text-white">
|
||||
<div className="w-full max-w-3xl text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Discord Storage</h1>
|
||||
<p className="text-lg text-gray-400 mb-8">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
|
||||
|
||||
{uploadState === 'idle' && (
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
className="bg-gray-800 border-2 border-dashed border-gray-600 rounded-lg p-12 cursor-pointer hover:border-gray-400 transition-colors"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<input type="file" className="hidden" id="file-upload" onChange={handleFileChange} />
|
||||
<label htmlFor="file-upload" className="flex flex-col items-center cursor-pointer">
|
||||
<svg className="w-16 h-16 text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></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="mt-8 w-full">
|
||||
<p className="mb-2 truncate">{selectedFile?.name}</p>
|
||||
<div className="bg-gray-700 rounded-full h-4 w-full">
|
||||
<div className="bg-blue-600 h-4 rounded-full transition-width duration-300" style={{ width: `${progress}%` }}></div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-400">{uploadState === 'processing' ? 'Processing file...' : `Uploading... ${progress}%`}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadState === 'complete' && (
|
||||
<div className="mt-8 w-full text-left bg-gray-800 rounded-lg p-4">
|
||||
<p className="text-lg font-semibold">Upload Complete!</p>
|
||||
<p className="text-sm text-gray-400 mb-2">Save this link to download your file. The link contains the decryption key.</p>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={downloadUrl}
|
||||
onClick={(e) => (e.target as HTMLInputElement).select()}
|
||||
className="w-full p-2 bg-gray-900 rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user