DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A file uploader built with shadcn/ui and react-dropzone

#upload #ui

File Uploader

A file uploader built with shadcn/ui and react-dropzone

This is a file uploader component built with shadnc/ui, and react-dropzone. It is bootstrapped with create-t3-app.

View DemoView Github

Tech Stack

  • Framework: Next.js
  • Styling: Tailwind CSS
  • UI Components: shadcn/ui
  • Storage: uploadthing
  • ORM: Drizzle ORM
  • Validation: Zod

Features

  • Reusable useFileUpload hook for uploading files with uploadthing
  • Drag and drop file upload component with progress bar
  • React-hook-form integration with shadnc/ui form components
  • File dialog demo with adding and removing files from the scrollable list
profile
AWS
 Promoted

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

profile
Pieces.app
 Promoted

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Read next

rivkaavraham profile image

auth0 secret

Rivka -

jeffrey04 profile image

How to write an AsyncIO Telegram bot in Python

Choon-Siang Lai -

laetitiaperraut profile image

Navigating Open Source License Compliance in Blockchain Projects

Laetitia Perraut -

mikeyoung44 profile image

First Cross-App Multimodal Search Dataset Shows How Users Navigate Mobile Apps

Mike Young -