This content originally appeared on DEV Community and was authored by sudarshan161219
I’m still working on my invoice tool for freelancers and small businesses, and today I added a new feature: file attachments for each client or invoice.
What I wanted
Let users attach receipts, PDFs, images, contracts, etc.
Allow multiple uploads
Show real-time progress
Rename files before/after uploading
Store files in the cloud (not just locally)
Keep everything tied to a specific client
Formats I decided to support
<input
type="file"
className="hidden"
onChange={handleChange}
multiple
disabled={uploadedFiles.length + uploadQueue.length >= MAX_FILES}
accept="
.jpg,.jpeg,.png,.webp,
.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.odt,
.zip,.rar,.7z,.tar,.gz,
.mp3,.wav,.mp4,.mov,
.psd,.ai,.svg,.fig"
/>
Tools I used
React + TypeScript
Cloudflare R2 for storage(free upto 10gb)
Presigned URLs for direct uploads
Prisma to link attachments to clients
Modals + toasts for UI
I’m sharing this because I’m trying to build this project piece by piece, learning as I go.
If you have ideas, better approaches, or feature suggestions, I’d love to hear them.
This content originally appeared on DEV Community and was authored by sudarshan161219
sudarshan161219 | Sciencx (2025-10-31T06:19:57+00:00) Building My Invoice App – Added File Attachments Today. Retrieved from https://www.scien.cx/2025/10/31/building-my-invoice-app-added-file-attachments-today/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.