유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

How to Delete Files from UploadThing in Next.js

Cand Dev

2025. 10. 15.

0

#backend
#db
  • Next.js 앱에서 UploadThing에 업로드된 파일과 PostgreSQL 데이터베이스에 저장된 관련 데이터를 동시에 삭제하는 방법을 다룹니다. 🎯
  • 프론트엔드에 각 파일 미리보기 옆 '삭제' 버튼을 추가하고, 클릭 시 파일 ID를 인자로 받는 handleDelete 함수를 호출합니다. 🗑️
  • handleDelete 함수 내에 브라우저 기본 confirm() 대화 상자를 추가하여 사용자 확인 절차를 거칩니다. ✅
  • DELETE HTTP 메서드를 처리하는 /api/upload/[id] 형태의 동적 API 라우트를 생성하여 특정 ID의 파일 삭제 요청을 처리합니다. 🛣️
  • UploadThing에서 파일을 삭제하려면 fileKey가 필수적이므로, schema.prismafileKey 필드를 추가하고 업로드 시 데이터베이스에 저장해야 합니다. 🔑
  • fileKey 필드 추가 후 npx prisma db push 명령을 실행하여 데이터베이스 스키마를 업데이트해야 합니다. 🔄
  • @uploadthing/serverUTAPI를 사용하여 utapi.deleteFiles(fileKey) 메서드로 UploadThing 서버에서 실제 파일을 삭제합니다. ☁️
  • 데이터 삭제는 UploadThing에서 파일을 먼저 삭제한 후, Prisma를 사용하여 PostgreSQL 데이터베이스에서 해당 레코드를 삭제하는 순서로 진행됩니다. ➡️
  • API 라우트에서 try-catch 블록으로 오류를 처리하고, 파일이 존재하지 않을 경우 404 상태 코드를 반환하는 유효성 검사를 포함합니다. 🛡️
  • 파일 삭제 성공 시 fetchUpload 함수를 다시 호출하여 UI를 새로고침하고, 삭제된 파일이 목록에서 사라지도록 합니다. 🚀

Recommanded Videos