Style “Picture” upload control (public store) #8003
Description
Title: UI improvement: Style “Picture” upload control on Apply for vendor account page to match theme
Type: Enhancement / UI/UX Improvement
Environment
- Product: nopCommerce-4.90.2
- Page: Public store → Apply for vendor account
- Field: Picture (vendor picture upload)
Current Behavior
On the Apply for vendor account page, the Picture field uses the browser’s default file upload control.
- The button text shows as “Choose File” with default OS styling.
- It does not visually match other buttons/inputs (e.g., “SUBMIT” button style).
- No clear indication of allowed file types or size.
- After selecting a file, the file name is shown in the default browser way only.
This makes the UI look inconsistent with the rest of the theme and slightly unpolished.
Expected / Suggested Improvement
Make the picture upload control consistent with nopCommerce theme styling and improve usability. For example:
-
Consistent button style
- Replace the default file input appearance with a styled button (e.g., “Upload picture”) matching the site’s primary button style.
- Hide the native
<input type="file">and trigger it via a styled button/label.
-
Better file info & helper text
- Show selected file name in a styled text area next to or below the button.
- Add helper text like:
“Allowed file types: .jpg, .png | Max size: X MB” (configurable if possible).
-
Layout consistency
- Align the upload control with other form fields (Vendor name, Email, Description) so that spacing and alignment are consistent.
- Make sure it behaves well on mobile/responsive layouts.
-
Optional: validation/feedback
- If an invalid file type/size is selected, show a clear validation message near the field.
Attachment
