Adding image attachments to notes

Where do files live?

Asha wants to attach a photo of her class timetable to a note. You could save the image inside the database or on your server's disk, but both are bad ideas: databases get slow and huge, and many hosting platforms wipe the server disk on every deploy.

Object storage is a service made for files. You put a file in a "bucket" (a big folder) under a key, like users/1/notes/3/a8f2-timetable.png, and get it back by that key. Popular choices are Amazon S3, Cloudflare R2, Supabase Storage and Cloudinary (which also resizes images for you).

Step 1: choosing the file in the browser

<form id="attach-form">
  <label for="photo">Attach a photo</label>
  <input id="photo" name="photo" type="file" accept="image/png, image/jpeg, image/webp">
  <button type="submit">Upload</button>
</form>

const file = document.querySelector('#photo').files[0];
// Small apps can send the file to their own API with FormData:
const form = new FormData();
form.append('photo', file);
await fetch('/api/notes/3/attachments', { method: 'POST', body: form });

Step 2: presigned uploads (the better way)

A presigned URL is a link that your server signs with its secret storage key. It allows exactly one action (for example "upload one file to this key") for a few minutes. The browser uploads straight to storage with it, so a 5 MB photo never passes through your server and your secret key never reaches the browser.

1. Browser: POST /api/notes/3/attachments/presign with { fileName, type, size }.
2. Server: checks login, that note 3 is the user's, and the type and size limits. Makes a safe unique key and a presigned PUT URL valid for 5 minutes.
3. Browser: uploads the file with fetch(url, { method: "PUT", body: file }).
4. Browser: POST /api/notes/3/attachments with { key } to confirm.
5. Server: checks the object exists and its size, then saves a row in the attachments table.

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

const s3 = new S3Client({ region: 'ap-south-1' }); // Mumbai; R2 also speaks the S3 API
const key = makeStorageKey(req.userId, noteId, fileName);
const url = await getSignedUrl(
  s3,
  new PutObjectCommand({ Bucket: process.env.BUCKET, Key: key, ContentType: type }),
  { expiresIn: 300 },
);
res.json({ url, key });

CREATE TABLE attachments (
  id INTEGER PRIMARY KEY,
  note_id INTEGER NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
  storage_key TEXT NOT NULL UNIQUE,
  file_name TEXT NOT NULL,
  content_type TEXT NOT NULL,
  size_bytes INTEGER NOT NULL,
  created_at TEXT
);

Step 3: showing, protecting and deleting files