[Feature Request] FileInput component

[notmedia]

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

Nextui missing file input component 🙏

Describe the solution you'd like

Like any other file input component with pretty styling of nextui ❤️

Screenshots or Videos

No response

[Albert-Jokelin]

What if we used an upload button with a text area beside it that displays the file uploaded. That should do the job

[notmedia]

Yep, something like this

[Albert-Jokelin]

Looks cool. Do we have plans to make it, if so how do I contribute?

[notmedia]

I think first we need to get approve from @jrgarciadev

[niklasp]

I need it because is unusable atm

[dbradmit]

Any updates, alternative options, etc? I've been building with nextui for the first time recently and ran into this need.

[AirP0WeR]

Begin using NextUI, beautiful libruary. Found that it dont have simple fileinput or dropzone.

[AbidHasanPiash]

I create a custom container that looks like my other NextUi form field like this:
export default function NextUiContainer({children}) { return ( <div className="flex w-full items-center justify-between space-x-4 p-2 border-2 hover:border-gray-400 rounded-xl transition-colors duration-300"> {children} </div> ) }
and then I use a simple input field for images like this:
<NextUiContainer> <input type="file" name="image" onChange={handleFileChange} className="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-pink-50 file:text-pink-700 hover:file:bg-pink-100" /> </NextUiContainer>

[brunogarcia]

In the release May 1, React Aria has a new component called DropZone.
It seems an evolution of our old friend "input type file"

https://react-spectrum.adobe.com/react-spectrum/DropZone.html

[fillobotto]

Anyone?

[wingkwong]

There's already a PR in progress.