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.

Sign up for GitHub

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

Jump to bottom

Add FileUpload component #465

Open
zemirco opened this issue Jan 11, 2023 · 1 comment
Open

Add FileUpload component #465

zemirco opened this issue Jan 11, 2023 · 1 comment
Labels
accepted Issues with this label are issues that the core team has accepted on to the roadmap. feature Issues that describe new features.

Comments

@zemirco
Copy link

zemirco commented Jan 11, 2023 •
edited
Loading

I know you already have the ld-input component with type="file".

https://liquid.merck.design/liquid/components/ld-input/#type-file

image

It would be nice to have a more advanced file upload component to further improve the UX.

Let's have a look at other component libraries.

Ant Design
https://ant.design/components/upload
image

IBM Carbon
https://carbondesignsystem.com/components/file-uploader/code/
image

Dell Design System
https://vanilla.delldesignsystem.com/2.21.0/index.html?path=/docs/components-file-input--basic
image

Edison™ Design System
https://edisondesignsystem.com/file-upload?tab=2
image

Segment Evergreen
https://evergreen.segment.com/components/file-uploader
image

Shopify Polaris
https://polaris.shopify.com/components/drop-zone#navigation
image

As you can see some of them provide

  • image preview
  • list of files with delete button
  • drag and drop (I know many browser do that natively but most of our users do not know that). It would be nice to have visual hints
  • upload progress

🤞🤞 Maybe you could realize this ✨✨
@borisdiakur borisdiakur added feature Issues that describe new features. needed: design decision Issues that need a design decision are blocked for development. needed: votes Enhancement suggestion which needs votes, before it gets addressed by the contributors. labels Jan 11, 2023
@borisdiakur borisdiakur added accepted Issues with this label are issues that the core team has accepted on to the roadmap. and removed needed: votes Enhancement suggestion which needs votes, before it gets addressed by the contributors. labels Jun 26, 2023
@borisdiakur
Copy link
Contributor

Design draft is available here: https://www.figma.com/file/UFHKrywqiCGP49EwN1Lq0c/%22Homepage%22?type=design&node-id=1802-132578&mode=design&t=PkP4r1xQDpn7d2hO-0

@borisdiakur borisdiakur removed the needed: design decision Issues that need a design decision are blocked for development. label Jun 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accepted Issues with this label are issues that the core team has accepted on to the roadmap. feature Issues that describe new features.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@borisdiakur @zemirco