Skip to content
Flows
Add Image Upload & Resizing Feature
App Builder60-90 minutes
0/6 steps0%

Step 1 of 6

Install dependencies & configure storage

Prepare the project with required libraries and a folder for saved images.

💡

The app is a Node/Express project with a package.json. Use Sharp for resizing and Multer for multipart handling. Store originals and resized files under ./public/uploads.

Prompt capsule

1. Run npm install sharp multer. 2. In the project root, create a folder named public/uploads if it does not exist. 3. Add a .gitignore entry to exclude uploaded files. 4. Ensure the import statements are added to the main server file (e.g., const multer = require('multer'); const sharp = require('sharp');). 5. Export a configured multer storage that writes files to ./public/uploads preserving original filenames. 6. Verify the server starts without module‑not‑found errors.

Paste into Claude · Complete implementation prompt with explicit requirements

Expected after this step

npm finishes, ./public/uploads exists, server starts, and `upload` is available for routes.

Should not happen

  • AI returns only pseudocode or placeholder file paths without creating real directories.
  • Multer is configured but the route never uses `upload.single('image')`.
  • Sharp resizing code is omitted or writes to a non‑existent location.
  • Database model or Prisma client is missing, leading to undefined `prisma.image`.

Verify before continuing

Do not move on until every check is true. The complete button stays locked until then.

Do not continue if…

  • !AI returns only pseudocode or placeholder file paths without creating real directories.
  • !Multer is configured but the route never uses `upload.single('image')`.
  • !Sharp resizing code is omitted or writes to a non‑existent location.
  • !Database model or Prisma client is missing, leading to undefined `prisma.image`.
  • !Front‑end component uses a wrong form field name, causing the backend to reject the file.
  • !Verification steps are described but the AI fabricates success messages without actual file/DB checks.

If the AI messes this up

Use this when the AI fakes progress or breaks the feature. It forces a real fix.

The dependencies were not actually installed or the folder was not created. Re‑run the install commands, ensure the `public/uploads` directory is created on the real filesystem, add the correct import lines, and verify the server starts without errors.

Your notes for this step