Jak przesyłać dokumenty w czacie Firebase
Budowa aplikacji czatowej dla zespołu sprzedaży wymaga czegoś więcej niż tylko tekstu i obrazów. Operatorzy często muszą udostępniać pliki PDF, dokumenty Word i arkusze Excel.
Dodałem obsługę dokumentów do systemu czatu Firebase przy użyciu Cloudinary. Oto szczegółowy opis techniczny.
Konfiguracja techniczna
Zastosowałem ten sam wzorzec dla dokumentów, co w przypadku wiadomości głosowych.
- Prześlij plik do Cloudinary.
- Zapisz URL w Firebase Realtime Database.
- Wyrenderuj niestandardową dymkę po stronie klienta.
Triki z Cloudinary
Cloudinary obsługuje multimedia inaczej niż pliki binarne. Jeśli spróbujesz przesłać plik PDF jako obraz, przesyłanie zakończy się niepowodzeniem.
Musisz użyć resource_type=raw w swoim adresie URL przesyłania.
Przykład kodu:
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;
}
Struktura danych
Nie polegaj na tym, że Cloudinary zwróci Ci nazwy plików w późniejszym czasie. Trudno je wyodrębnić z adresu URL.
Zapisz te trzy rzeczy w Firebase podczas przesyłania:
- docUrl
- fileName
- fileSize
Pozwala to na natychmiastowe wyrenderowanie dymki czatu bez dodatkowych żądań.
Interfejs użytkownika
Dymka dokumentu zawiera:
- Półprzezroczyste niebieskie tło.
- Ikonę na podstawie rozszerzenia pliku (np. 📄 dla PDF lub 📊 dla Excel).
- Nazwę pliku i jego rozmiar.
- Przycisk pobierania.
Na co warto uważać
- Cloudinary Presets: Upewnij się, że Twój niepodpisany preset (unsigned preset) jest ustawiony na auto. Jeśli zostanie ustawiony tylko na audio, przesyłanie plików PDF zwróci błąd 400.
- Błędy JavaScript: Podczas dodawania nowych gałęzi do zagnieżdżonych operatorów trójargumentowych, jeden dodatkowy nawias może zepsuć kod. Dokładnie sprawdzaj składnię.
- Typy plików: System obsługuje teraz pliki PDF, DOCX, XLSX, PPTX, TXT, CSV, ZIP i RAR.
Wzorzec pozostaje prosty: przesyłanie do CDN, przechowywanie w Firebase i renderowanie po stronie klienta.