How to upload multiple images to S3 using presigned URLs and bind them to specific sections in...

I'm building a product creation/editing app using Angular (frontend) and .NET Core Web API (backend). Each product has a dynamic form and a live preview beside it.

Every product can have multiple images, but each image is tied to a specific position in the live preview When creating or editing a product, I need to:

Let users upload images into each section (up to 3 or more),

Upload these images to AWS S3 using presigned URLs to avoid exposing credentials,

Store the image positions and metadata (like S3 key or URL) in the backend,

And on retrieval (edit or preview), correctly display the images in their designated positions.

My proposed flow: User selects an image for a specific section

Frontend requests a presigned PUT URL from the backend for that image.

Frontend uploads the image directly to S3 using that URL.

After successful upload, frontend sends the image position + S3 key/URL back to the backend to be saved in the product record.

When retrieving a product, the API returns the product details including each image and its section , and the key will be mapped to get the image as blob .

-Does this architecture make sense for handling sectioned images?

Continue reading...