search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.38k stars 768 forks source link

[New Primitive] `FileUpload` #1327

Open colmtuite opened 2 years ago

colmtuite commented 2 years ago

Feature request

Overview

The native <input type="file"> is not customisable. To get around this, I often see people doing:

<label>
  <button>
  <input type="file" style="hide this element visually">
</label>

However, this approach doesn't render the filename, which is bad for a11y. Rendering the filename requires JS

Who does this impact? Who is this for?

Anyone who wants custom UI and uses forms, which is quite a lot of people.

Additional context

We could also provide a part to render the filesize (which I think is available through the browser API).

Examples

https://baseweb.design/components/file-uploader

asherccohen commented 2 years ago

A good example of use cases can be found on Uber's base web component lib

hjonasson commented 1 year ago

Is there any movement on this?

benoitgrelard commented 1 year ago

Is there any movement on this?

No we haven't started any work on this specific primitive.

musdotdigital commented 1 year ago

would be a great addition.

vermeerenmaxime commented 1 year ago

Can't wait for this (:

Dannymx commented 11 months ago

This is definitely needed.

pipifix commented 10 months ago

This would be a great addition. Can't wait for this.

ederbiason commented 9 months ago

Really useful component, would be a greate addition fr. letss go

dexhorthy commented 9 months ago

+1 🙏

demarchenac commented 9 months ago

+2 🙏🏻

rinorzk commented 9 months ago

+1 🙏🏼

samantha-wong commented 8 months ago

+1 🙏

trocoli96 commented 8 months ago

+1

bittercoder commented 8 months ago

This would be super helpful 👍 +1

spencer-rafada commented 7 months ago

This would be super helpful +1

ereburg commented 7 months ago

+1

MaxRojas1990 commented 7 months ago

+1

rbrahier17 commented 6 months ago

+1

jlarmstrongiv commented 6 months ago

Another example is https://ark-ui.com/docs/components/file-upload based on https://zagjs.com/components/react/file-upload

kevin1193 commented 4 months ago

is there any update on this ?

michaelparkadze commented 2 months ago

Would be a great addition! +0.30000000000000004

TareqRafed commented 2 months ago

yes please

mondial7 commented 3 weeks ago

+1

rsxdalv commented 1 week ago

I will probably use React Aria because this project does not support file input.