https://github.com/hritik-6918/file-uploader
File uploader built with shadcn/ui and react-dropzone.
https://github.com/hritik-6918/file-uploader
Last synced: 2 months ago
JSON representation
File uploader built with shadcn/ui and react-dropzone.
- Host: GitHub
- URL: https://github.com/hritik-6918/file-uploader
- Owner: hritik-6918
- Created: 2024-08-07T11:13:26.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-10T17:10:55.000Z (10 months ago)
- Last Synced: 2024-08-10T17:59:08.046Z (10 months ago)
- Language: TypeScript
- Homepage: https://file-uploader-steel.vercel.app
- Size: 162 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## File Uploader
This is a file uploader built with `shadnc/ui`, and `react-dropzone`. It is bootstrapped with `create-t3-app`.
## Tech Stack
- **Framework:** [Next.js](https://nextjs.org)
- **Styling:** [Tailwind CSS](https://tailwindcss.com)
- **UI Components:** [shadcn/ui](https://ui.shadcn.com)
- **DND Uploader:** [react-dropzone](https://react-dropzone.js.org/)
- **Storage:** [uploadthing](https://uploadthing.com)
- **Validation:** [Zod](https://zod.dev)
## Features
- [x] Reusable `useFileUpload` hook for uploading files with `uploadthing`
- [x] Drag and drop file upload component with progress bar
- [x] React-hook-form integration with `shadnc/ui` form components
- [x] File dialog demo with adding and removing files from the scrollable list
## Running Locally
1. Clone the repository
```bash
git clone https://github.com/hritik-6918/file-uploader
```
2. Install dependencies using pnpm
```bash
pnpm install
```
3. Copy the `.env.example` to `.env` and update the variables.
```bash
cp .env.example .env
```
4. Start the development server
```bash
pnpm run dev
```
## How do I deploy this?
Follow the deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.