Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request]: Add dynamic image selection component #213

Open
AkashPaloju opened this issue Jul 21, 2024 · 2 comments
Open

[Feature Request]: Add dynamic image selection component #213

AkashPaloju opened this issue Jul 21, 2024 · 2 comments
Assignees

Comments

@AkashPaloju
Copy link
Collaborator

AkashPaloju commented Jul 21, 2024

Is your feature request related to a problem? Please describe.

We need an image selection component to upload images when adding a product / event

Describe the solution you'd like

Add the component according to this figma - https://www.figma.com/design/5Hs4DlvyJJWjQB9K7Fh0CY/Getit?node-id=1254-922&t=zvceiaocLViVgFF6-0

Refer to the five images on the right side of the "Add New Product" page that illustrate how the component's layout varies with the number of uploaded images. Only the last slot should contain the below image; the other slots display the uploaded images.

Screenshot from 2024-07-21 15-15-04

Clicking this will open a file selection window for users to upload images from their device.

Note: The parent component will receive all data from the backend and pass it to this child component. This child componen does not interact directly with the backend.

Describe alternatives you've considered

No response

Developer Notes

Explain how you restrict user to upload only image formats(png,jpg,webp) ? How you implement the file selection window thing ? List the component's "props" you create and explain how data communication occurs between the component and its parent component

@ShashaankS
Copy link
Contributor

@AkashPaloju I want to work on the issue, i"ll create new vue component with input type file and a accept field which be passed from the parent as a prop defining the acceptance of the filetype like jpg, png, webp,
a handleChange function will be used to keep track of the changes and add them to a array.
i"ll use $emit to finally emit the changes to the parent component.

@AkashPaloju
Copy link
Collaborator Author

@ShashaankS Great! You can work on this, go ahead.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants