6-step workflowimage upload resize backend frontend generated Files & media guided-flow App Builder

Add Image Upload & Resizing Feature

Integrate a backend image upload endpoint that resizes images and stores them, plus a front‑end component to use it.

Run this as a guided flow on Flows — verify gates and recovery prompts included →

Flows@flows12d ago

0 runs0 forks0

Chain

Inputs

Step 1

flow-image-upload-resizing-1-install-dependencies-configure-storage-c0d61b

Step 2

flow-image-upload-resizing-2-create-backend-upload-endpoint-ed1c50

Step 3

flow-image-upload-resizing-3-resize-image-with-sharp-d513e3

Step 4

flow-image-upload-resizing-4-persist-image-metadata-to-the-database-52e56f

Step 5

flow-image-upload-resizing-5-build-front-end-image-upload-component-1a757c

Step 6

flow-image-upload-resizing-6-end-to-end-verification-cleanup-4b6e5a

Final output

Workflow inputs

No inputs required — hit Run to stream each step in order.

Each step streams from its model and feeds the next. BYOK — you pay your provider directly. Add a key in Settings if a step needs one.

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

flow-image-upload-resizing-1-install-dependencies-configure-storage-c0d61b

Claude Sonnet 4.6→ {{step_1}}

Awaiting upstream steps…

Step 2 · Expose an API route that accepts an image file via multipart/form-data.

flow-image-upload-resizing-2-create-backend-upload-endpoint-ed1c50

Claude Sonnet 4.6→ {{step_2}}

Awaiting upstream steps…

Step 3 · Generate multiple sized versions (e.g., thumbnail 150x150, medium 600x600) and store them alongside the original.

flow-image-upload-resizing-3-resize-image-with-sharp-d513e3

Claude Sonnet 4.6→ {{step_3}}

Awaiting upstream steps…

Step 4 · Store original and resized filenames, dimensions, and upload timestamp for later retrieval.

flow-image-upload-resizing-4-persist-image-metadata-to-the-database-52e56f

Claude Sonnet 4.6→ {{step_4}}

Awaiting upstream steps…

Step 5 · Provide a UI for users to select an image, preview it, and submit to the new endpoint.

flow-image-upload-resizing-5-build-front-end-image-upload-component-1a757c

Claude Sonnet 4.6→ {{step_5}}

Awaiting upstream steps…

Step 6 · Confirm that the full upload‑resize‑persist cycle works and remove any temporary files.

flow-image-upload-resizing-6-end-to-end-verification-cleanup-4b6e5a

Claude Sonnet 4.6→ {{step_6}}

Awaiting upstream steps…

About this workflow

Integrate a backend image upload endpoint that resizes images and stores them, plus a front‑end component to use it.

What happens when you run it

1
Prepare the project with required libraries and a folder for saved images.
Runs flow-image-upload-resizing-1-install-dependencies-configure-storage-c0d61b on Claude Sonnet 4.6
2
Expose an API route that accepts an image file via multipart/form-data.
Runs flow-image-upload-resizing-2-create-backend-upload-endpoint-ed1c50 on Claude Sonnet 4.6
3
Generate multiple sized versions (e.g., thumbnail 150x150, medium 600x600) and store them alongside the original.
Runs flow-image-upload-resizing-3-resize-image-with-sharp-d513e3 on Claude Sonnet 4.6
4
Store original and resized filenames, dimensions, and upload timestamp for later retrieval.
Runs flow-image-upload-resizing-4-persist-image-metadata-to-the-database-52e56f on Claude Sonnet 4.6
5
Provide a UI for users to select an image, preview it, and submit to the new endpoint.
Runs flow-image-upload-resizing-5-build-front-end-image-upload-component-1a757c on Claude Sonnet 4.6
6
Confirm that the full upload‑resize‑persist cycle works and remove any temporary files.
Runs flow-image-upload-resizing-6-end-to-end-verification-cleanup-4b6e5a on Claude Sonnet 4.6

Best for

•Recurring tasks you currently copy-paste between tools.
•When a single prompt isn't enough — you need a chain where output(n) feeds prompt(n+1).
•Fork and adapt if your inputs differ materially from the author's use case.

Models used

Claude Sonnet 4.6