/Web Dev/Phase 10

Phase 10Days 113-117

Image / File Storage at Scale

Cloudinary, S3 + CloudFront, signed URLs, direct-to-storage uploads

Phase Goal

Move beyond "save a file path in Mongo" — handle uploads, transformations, signed URLs, and CDN delivery the way real apps do.

Progress

Open the written lectures for this course before checking off the phase topics.

Projects

Oral-History Archive Ingest — DEPLOYED

Day 113: The Storage Landscape

Cloudinary: dev experience king, transformations free, costlier at scaleS3 + CloudFront: cheapest at scale, you build everythingUploadcare / Bunny: middle groundDefault for new projects: Cloudinary; switch later if needed

Geographic latency (Mumbai user, US server = slow)Edge caches static assets near usersReduces origin bandwidth bill

Server-routed: client → your server → storageDirect upload: client → storage (with signed URL)Direct is mandatory at scale (saves your server bandwidth)

Whitelist MIME + size on serverMagic-byte sniff for image type (file-type pkg)Strip EXIF (privacy)Antivirus scan for arbitrary files (ClamAV or Cloudflare R2 features)

Day 114: Cloudinary Done Right

/w_400,h_400,c_fill,g_face/profile.jpgf_auto, q_auto for format/quality magicVersioned URLs to bust caches on re-upload

Unsigned preset for low-risk public uploadsSigned: server returns a signature, client uploads directlyFolder + tag conventions

Cloudinary calls your webhook on upload/transformUpdate DB record with the secure_urlVerify the signature in the webhook

Free tier credits are limitedBe careful with on-the-fly transforms (each unique URL = 1 credit)Use named transformations to standardize

Day 115: AWS S3 + CloudFront

Create bucket, region, blocking public access (recommended)IAM user with least-privilege policyBucket policies vs ACLs (use bucket policy)Versioning + lifecycle rules

@aws-sdk/client-s3 + @aws-sdk/s3-request-presignerPutObjectCommand for server uploadsStream from Multer buffer

Server signs a PUT URL valid for 5 minutesClient PUTs the file directly to S3Frontend uploads progress via xhr.uploadServer records the eventual key in DB

Distribution with S3 origin + OAC (Origin Access Control)Block direct S3 access; only CloudFront servesCustom domain + ACM certCache TTLs for assets

For private content (e.g., paid courses)CloudFront key pair + signingTime-limited access

Day 116: Image Pipeline & Optimization

Native (libvips) — fastResize, format convert, strip EXIFUseful for profile pic squaring before storage

<img srcset> + sizes for browser to picknext/image does this for you (in Next apps)Avoid loading 4K image on mobile

Blur placeholder for perceived perfPlaiceholder package generates base64 blurDataURLnext/image accepts blurDataURL prop

PDFs: store + serve via signed URLVideo: HLS streaming via Mux or Cloudflare StreamAudio: same approach as video for podcasts

Day 117: Project — Oral-History Archive Ingest

Multi-image recipes (gallery)Direct-to-S3 upload with progress barCloudFront deliverySigned URLs for "private draft" recipes

POST /uploads/sign returns presigned PUT URL + keyPOST /recipes/:id/images saves the key after uploadGET signed CloudFront URL for private images

react-dropzone for drag-dropParallel upload of multiple filesPer-file progress bar, retry on errorReorder via drag (dnd-kit)

CloudFront distribution liveBucket policy verified (no public access)README explains the upload flow with diagram

Capstone

Oral-History Archive Ingest — DEPLOYED

Build archive intake for interview audio, consent forms, portraits, and transcripts: direct browser uploads, private masters, signed cataloguer links, public-safe derivatives, checksum metadata, and withdrawal rules. Use S3-compatible storage, presigned URLs, appropriate CDN delivery, and document the threat model.

Direct-to-storage upload with server-issued signed policy/URL and MIME/size validation.
Private originals, expiring reviewer links, and public-safe thumbnail derivatives.
Upload progress, failure recovery, and a concise storage-security README.

Phase Complete!

After this phase, you'll be able to:

Choose Cloudinary vs S3+CloudFront consciously
Implement direct-to-storage uploads with signed URLs
CloudFront fronting S3 with OAC
Image pipeline: resize, format, blur placeholder

Your apps can handle uploads at production scale without melting the server.

Back to all phases