Writing about files, uploads and image APIs

How to upload, resize and serve files without building the plumbing yourself.

• Upload a file from a React form without exposing your API key

  The browser cannot hold your upload key. Here is the three-part flow that keeps it on your server, in about forty lines.

• Resize images on upload instead of on download, and why the bill differs

  Transforming on download bills you per cache miss forever. Transforming on upload bills you once. The difference compounds.

• Serving webp and avif without a build step

  No sharp in your repo, no image pipeline in CI, no picture element with four sources. Convert once, on upload, and serve one URL.

• "User avatars: the whole flow, from file picker to a URL in your database"

  The complete path for the most common upload in software, including the parts people skip: the square crop, the default, and the old file.

• Storing PDFs and images in the same place without a bucket policy

  Receipts and product photos want opposite rules. Getting that from one bucket takes a policy document; getting it from two templates takes two lines.

• Why signed URLs beat unguessable ones for anything private

  A long random URL is a password you cannot change, that leaks through referrers, chat previews and browser history. Signing gives it an expiry.

• Cloudinary alternatives for a side project budget

  An honest map of the options when the image bill is bigger than the app, including when the answer is to stay where you are.

• "S3 plus glue code versus an upload API: what you actually maintain"

  The bucket is the easy part. Here is the list of everything that gets built around it, so the comparison is honest.

• "Thumbnails without a queue: doing the work at upload time"

  A queue exists to make a slow request fast. Thumbnailing is not slow enough to need one, and the queue costs more than it saves.

• File ids that carry their own storage path

  Sixteen characters that say which account, which project, which template and which file, so serving one never needs a database lookup.

• A folder and a transformation are the same object

  Folders say where a file went, transformations say what it looks like, and keeping them apart is why upload code gets tangled. Templates merge them.