Firebase 채팅에서 문서 업로드하는 방법

영업 팀을 위한 채팅 앱을 구축할 때는 텍스트와 이미지만으로는 부족합니다. 운영자는 종종 PDF, Word 파일, Excel 시트를 공유해야 합니다.

Cloudinary를 사용하여 Firebase 채팅 시스템에 문서 지원 기능을 추가했습니다. 기술적인 세부 사항은 다음과 같습니다.

기술적 구성

음성 메시지에 사용했던 것과 동일한 패턴을 문서에도 적용했습니다.

  • Cloudinary에 파일을 업로드합니다.
  • URL을 Firebase Realtime Database에 저장합니다.
  • 클라이언트 측에서 커스텀 말풍선(bubble)을 렌더링합니다.

Cloudinary 활용 팁

Cloudinary는 미디어를 바이너리 파일과 다르게 처리합니다. PDF를 이미지로 업로드하려고 하면 업로드가 실패합니다.

업로드 URL에 resource_type=raw를 반드시 사용해야 합니다.

예시 코드:

async function chatHandleDocFile(file) {
  const fd = new FormData();
  fd.append('file', file);
  fd.append('upload_preset', 'Vocali');

  const res = await fetch(
    `https://api.cloudinary.com/v1_1/CLOUD_NAME/raw/upload`,
    { method: 'POST', body: fd }
  );
  const data = await res.json();
  return data.secure_url;
}

데이터 구조

나중에 파일 이름을 얻기 위해 Cloudinary에 의존하지 마세요. URL에서 파일 이름을 추출하는 것은 어렵습니다.

업로드 시 Firebase에 다음 세 가지를 저장하세요:

  • docUrl
  • fileName
  • fileSize

이렇게 하면 추가 요청 없이 채팅 말풍선을 즉시 렌더링할 수 있습니다.

사용자 인터페이스

문서 말풍선에는 다음이 포함됩니다:

  • 반투명한 파란색 배경.
  • 파일 확장자에 기반한 아이콘 (예: PDF의 경우 📄, Excel의 경우 📊).
  • 파일 이름과 파일 크기.
  • 다운로드 버튼.

주의 사항

  • Cloudinary Presets: unsigned preset이 auto로 설정되어 있는지 확인하세요. 만약 audio로만 설정되어 있다면, PDF 업로드 시 400 에러가 발생합니다.
  • JavaScript Errors: 중첩된 삼항 연산자에 새로운 분기를 추가할 때, 괄호 하나만 잘못 들어가도 코드가 깨질 수 있습니다. 구문을 주의 깊게 확인하세요.
  • File Types: 이제 시스템은 PDF, DOCX, XLSX, PPTX, TXT, CSV, ZIP, RAR을 지원합니다.

패턴은 간단합니다: CDN 업로드, Firebase 저장, 그리고 클라이언트 측 렌더링.

Source: https://dev.to/androve2k/uploading-pdf-word-and-excel-files-in-a-firebase-chat-cloudinary-resourcetyperaw-and-custom-142h