By Khanh Nguyen (Nguyễn Đình Khánh Nguyên) · Updated
A short path from file selection to sharing
File Uploader turns file selection into a simple sharing workflow. Users add several files, review the results and choose a useful next action: download, copy a link or display a QR code. Local history helps them revisit previously listed uploads in the same browser.
The project combines a Next.js application with a small upload API. The important distinction is between the interface remembering an upload and the server retaining the file bytes. Those are separate lifecycles, and the case study makes that limitation explicit.
How the upload flow is organized
The current repository uses Next.js 16, React 19, TypeScript and Tailwind CSS 4. The uploader feature groups its components, hook and types. Route handlers under /api/upload receive uploads and expose individual uploaded items. The interface provides duplicate-name filtering, theme switching and QR sharing.
The implementation in lib/upload-store.ts stores file metadata and Buffer contents in a process-local Map. Files disappear when that process restarts, and browser history does not make the server storage durable. This is a temporary upload prototype; persistent object storage and a retention policy would be a separate implementation step.
Engineering discussion
This case study is a practical example of connecting a browser interaction to a server resource. It invites questions about request limits, file lifetime, failure feedback and the difference between client persistence and backend persistence. Those are useful Fullstack tradeoffs without presenting a prototype as a production storage service.
Related work and evidence
- Read the feature overview and run the project locally. File Uploader repository.
- Inspect how the current server stores file bytes. Temporary upload storage implementation.
- Compare uploading a file with browsing and previewing existing documents. Next Document Hub case study.
- Explore a related document workflow on my engineering blog. Reading technical PDFs without losing layout.
- For my broader skills and background, view my CV. Khanh Nguyen — Fullstack Software Engineer CV.
- Read the architecture notes on temporary bytes, object storage and upload authorization. Upload storage beyond an in-memory prototype.
