หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

โปรแกรมอัพโหลดไฟล์

นี่คือเครื่องมืออัปโหลดไฟล์ที่สร้างด้วย shadnc/ui และ react-dropzone มันถูกบูทด้วย create-t3-app

โปรแกรมอัพโหลดไฟล์

เทคสแต็ค

  • กรอบการทำงาน: Next.js
  • การจัดสไตล์: Tailwind CSS
  • ส่วนประกอบ UI: shadcn/ui
  • ตัวอัปโหลด DND: ปฏิกิริยาดรอปโซน
  • ที่เก็บข้อมูล: การอัปโหลด
  • การตรวจสอบความถูกต้อง: Zod

คุณสมบัติ

  • ใช้ซ้ำได้ useFileUpload hook สำหรับการอัพโหลดไฟล์ด้วย uploadthing
  • ลากและวางองค์ประกอบการอัพโหลดไฟล์ด้วยแถบความคืบหน้า
  • การรวม React-hook-form กับส่วนประกอบของแบบฟอร์ม shadnc/ui
  • การสาธิตกล่องโต้ตอบไฟล์พร้อมการเพิ่มและลบไฟล์ออกจากรายการที่เลื่อนได้

วิ่งในพื้นที่

  1. โคลนพื้นที่เก็บข้อมูล 

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

  2. ติดตั้งการพึ่งพาโดยใช้ pnpm 

    pnpm install

  3. คัดลอก .env.example ไปยัง .env และอัปเดตตัวแปร 

    cp .env.example .env

  4. เริ่มเซิร์ฟเวอร์การพัฒนา 

    pnpm run dev

ฉันจะปรับใช้สิ่งนี้ได้อย่างไร

ปฏิบัติตามคำแนะนำในการปรับใช้สำหรับ Vercel, Netlify และ Docker สำหรับข้อมูลเพิ่มเติม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด