Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sadmann7/file-uploader
File uploader built with shadcn/ui and react-dropzone.
https://github.com/sadmann7/file-uploader
dropzone shadcnui uploader uploadthing
Last synced: 6 days ago
JSON representation
File uploader built with shadcn/ui and react-dropzone.
- Host: GitHub
- URL: https://github.com/sadmann7/file-uploader
- Owner: sadmann7
- License: mit
- Created: 2024-04-07T00:10:36.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-12-05T20:57:20.000Z (7 days ago)
- Last Synced: 2024-12-05T21:31:56.815Z (7 days ago)
- Topics: dropzone, shadcnui, uploader, uploadthing
- Language: TypeScript
- Homepage: https://uploader.sadmn.com
- Size: 951 KB
- Stars: 902
- Watchers: 3
- Forks: 56
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-shadcn-ui - file-uploader - A file uploader built with shadcn/ui and react-dropzone. (Libs and Components)
- awesome-shadcn-ui - File Uploader - File uploader built with shadcn/ui and react-dropzone. (Components)
- awesome-shadcn-ui - File Uploader - File uploader built with shadcn/ui and react-dropzone. (Components)
README
# [File Uploader](https://uploader.sadmn.com)
This is a file uploader built with `shadnc/ui`, and `react-dropzone`. It is bootstrapped with `create-t3-app`.
[](https://uploader.sadmn.com)
## 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/sadmann7/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.