Skip to content

Image Upload Support for Products

  • Complexity: High
  • Stack: Full-stack (Backend + Frontend)

As an admin user, I want to upload images for products so that customers can see product photos when browsing the catalog.

Description

The Product entity already has an imageUrl field, but it currently only holds a plain URL string with no actual file upload mechanism. This story adds the ability for admins to upload a product image file through the application, store it on the backend, and serve it via a dedicated endpoint. The existing product-form component needs to be extended with a file upload control, and the product-card and product-detail-page components should display the uploaded image.

Acceptance Criteria

  • [ ] Admin can upload a JPEG or PNG image when creating or editing a product (via product-create-page and product-update-page)
  • [ ] Each product supports one image — uploading a new image replaces the previous one
  • [ ] Product catalog page displays image thumbnails in the product-card component
  • [ ] Product detail page displays the full image
  • [ ] Products without images display a placeholder
  • [ ] Uploading a file > 5 MB shows a validation error
  • [ ] Uploading a non-image file (e.g., .exe, .pdf) shows a validation error
  • [ ] Upload errors are communicated via the existing NotificationService
  • [ ] Image persists after page reload

Copyright © MSG Systems Romania AI Labs