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? -Any improvements or best practices I should follow for S3 image access, security, or frontend integration?
Your architecture looks solid.
I would make sure to have small validations such as file size and type. Perhaps some optimisation on the server side for images deserves sone attention. Other than that make sure you use short live urls.
That’s about all I can think of, though I’m sure there are some more things to think about here