Firebase Sohbetinde Dokümanlar Nasıl Yüklenir

Bir satış ekibi için sohbet uygulaması geliştirmek, metin ve görsellerden daha fazlasını gerektirir. Operatörlerin genellikle PDF, Word dosyaları ve Excel tabloları paylaşması gerekir.

Cloudinary kullanarak bir Firebase sohbet sistemine doküman desteği ekledim. İşte teknik ayrıntılar.

Teknik Kurulum

Dokümanlar için de sesli mesajlarda kullandığım aynı yöntemi kullandım.

  • Dosyayı Cloudinary'ye yükleyin.
  • URL'yi Firebase Realtime Database'e kaydedin.
  • İstemci tarafında özel bir mesaj balonu (bubble) oluşturun.

Cloudinary İpucu

Cloudinary, medyayı ikili (binary) dosyalardan farklı şekilde işler. Eğer bir PDF'i görsel olarak yüklemeye çalışırsanız, yükleme başarısız olur.

Yükleme URL'nizde resource_type=raw kullanmalısınız.

Örnek kod:

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;
}

Veri Yapısı

Dosya adlarını daha sonra Cloudinary'den çekmeye güvenmeyin. Bunları URL'den çıkarmak zordur.

Yükleme sırasında şu üç şeyi Firebase'e kaydedin:

  • docUrl
  • fileName
  • fileSize

Bu, sohbet balonunun ekstra istek yapmadan anında oluşturulmasını sağlar.

Kullanıcı Arayüzü

Doküman balonu şunları içerir:

  • Yarı saydam mavi bir arka plan.
  • Dosya uzantısına dayalı bir simge (PDF için 📄 veya Excel için 📊 gibi).
  • Dosya adı ve dosya boyutu.
  • Bir indirme butonu.

Dikkat Edilmesi Gerekenler

  • Cloudinary Presetleri: İmzasız (unsigned) preset ayarınızın auto olduğundan emin olun. Eğer sadece audio olarak ayarlanmışsa, PDF yüklemeleri 400 hatası döndürecektir.
  • JavaScript Hataları: İç içe geçmiş ternary operatörlerine yeni dallar eklerken, fazladan tek bir parantez bile kodunuzu bozabilir. Sözdiziminizi (syntax) dikkatlice kontrol edin.
  • Dosya Türleri: Sistem artık PDF, DOCX, XLSX, PPTX, TXT, CSV, ZIP ve RAR formatlarını destekliyor.

Yöntem basit: CDN yüklemesi, Firebase depolaması ve istemci tarafında render işlemi.

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