 |
요약 | AI 봇 대화 페이지용 드래그 앤 드롭 업로드 + 파일 미리보기 |
 |
저장소 | GitHub - VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page: Drag & Drop Upload + File Previews for AI Bot Conversations page · GitHub |
 |
도움이 되셨나요? | > ./support --coffee |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
디스코urse 테마를 처음 사용하시나요? | 디스코urse 테마 사용 입문 가이드 |
이 테마 컴포넌트 설치
안녕하세요 
AI 봇 대화 페이지의 입력란에 파일을 업로드하는 것은 업로드 버튼을 통해서만 작동하며, 파일이 첨부된 후에는 일반 텍스트 줄로 파일명만 표시되고, 미리보기나 실제로 무엇을 첨부했는지에 대한 시각적 표시가 없습니다.
이 컴포넌트가 추가하는 기능
- 대화 패널 어디든 드래그 앤 드롭 — 텍스트 영역뿐만 아니라, 드래그 중일 때 하이라이트 상태가 적용되는 전체 패널이 드롭 존으로 작동합니다.
- 이미지 업로드용 실제 이미지 썸네일 — 클라이언트 측에서 생성되며, 텍스트만 표시되는 대신 파일명과 함께 표시됩니다.
- 비이미지 파일용 색상 코딩 확장자 배지 (PDF, DOCX, XLSX, ZIP, MP3, 코드 파일 등) — 실제 미리보기가 불가능한 파일 유형에서도 업로드 목록이 시각적으로 스캔하기 쉽게 합니다.
- 테마 설정으로 설정 가능 —
default_badge_color폴백 색상과extension_colors객체 스키마 설정을 통해 관리자가 테마 설정 UI에서 직접 확장자별로 색상을 추가/재정의할 수 있으며, 코드 편집이 필요하지 않습니다.
설정
| 설정 | 설명 |
|---|---|
default_badge_color |
명시적으로 색상이 설정되지 않은 확장자를 위한 폴백 16진수 색상 |
extension_colors |
내장 카테고리 색상을 재정의/확장하기 위한 { extension, color } 행의 객체 스키마 목록 |
내장 카테고리는 이미 문서, 스프레드시트, 프레젠테이션, 아카이브, 오디오, 비디오, 코드, 폰트, 전자책 등 대부분의 일반 파일 유형을 기본적으로 지원하므로, 대부분의 사용자는 extension_colors를 건드릴 필요가 없습니다.