Drop zone component ?

[vexkiddy]

Would it be possible to add a drop zone component ? Thanks for the amazing work!! :D

[cpeaustriajc]

There's already an issue here: https://github.com/shadcn-ui/ui/issues/163

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[beachstrider]

I still want this.

[diragb]

I created a simple version of the drop-zone component, published as shadcn-dropzone. ✨

yarn add shadcn-dropzone

Here is an example of how you would use it:

<Dropzone
  onDrop={(acceptedFiles: File) => {
    // Do something with the files
  }}
>
  {(dropzone: DropzoneState) => (
    <>
      {
        dropzone.isDragAccept ? (
          <div className='text-sm font-medium'>Drop your files here!</div>
        ) : (
          <div className='flex items-center flex-col gap-1.5'>
            <div className='flex items-center flex-row gap-0.5 text-sm font-medium'>
              Upload files
            </div>
          </div>
        )
      }
      <div className='text-xs text-gray-400 font-medium'>
        { dropzone.acceptedFiles.length } files uploaded so far.
      </div>
    </>
  )}
</Dropzone>

Demo: https://diragb.github.io/shadcn-dropzone

[ArielMejiaDev]

@diragb the demo site is down

[diragb]

@diragb the demo site is down

Thanks for this, it's up now.

[vexkiddy]

is there any chance this might become part of the official shadcn repo ? @shadcn ? :)