Building My Invoice App – Added File Attachments Today

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.