StarRankExplorer

랭킹으로 돌아가기

sadmann7/file-uploader

TypeScriptdiceui.com/docs/components/file-upload

File uploader built with shadcn/ui and Radix UI.

dropzoneshadcnuiuploaderuploadthing

주요 지표

스타 성장

스타

1.4k

포크

93

주간 성장

—

이슈

6

1k1.2k1.4k

2024년 4월2024년 8월2025년 1월2025년 5월2025년 10월2026년 3월2026년 7월

아티팩트npmnpm install file-uploader

README

File Uploader

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

Tech Stack

Framework: Next.js
Styling: Tailwind CSS
UI Components: shadcn/ui
DND Uploader: react-dropzone
Storage: uploadthing
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

Running Locally

Clone the repository

git clone https://github.com/sadmann7/file-uploader

Install dependencies using pnpm
```
pnpm install
```
Copy the .env.example to .env and update the variables.
```
cp .env.example .env
```
Start the development server
```
pnpm run dev
```

How do I deploy this?

Follow the deployment guides for Vercel, Netlify and Docker for more information.

관련 저장소

dropzone/dropzone

Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

JavaScriptnpmOtherdropzonejavascript

dropzone.dev/js

atlassian/pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack

TypeScriptnpmOtherdrag-and-dropdnd

atlassian.design/components/pragmatic-drag-and-drop

FineUploader/fine-uploader

Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

JavaScriptnpmMIT Licensefineuploaderjavascript

fineuploader.com