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