Jinsi ya Kupakia Nyaraka katika Chat ya Firebase

Kujenga programu ya chat kwa ajili ya timu ya mauzo kunahitaji zaidi ya maandishi na picha. Waendeshaji mara nyingi wanahitaji kushiriki PDF, faili za Word, na karatasi za Excel.

Niliongeza uwezo wa nyaraka kwenye mfumo wa chat wa Firebase nikitumia Cloudinary. Hapa kuna uchambuzi wa kiufundi.

Mpangilio wa Kiufundi

Nilitumia mfumo ule ule kwa nyaraka kama nilivyofanya kwa ujumbe wa sauti.

  • Pakia faili kwenye Cloudinary.
  • Hifadhi URL kwenye Firebase Realtime Database.
  • Onyesha (render) "bubble" maalum upande wa mteja (client side).

Mbinu ya Cloudinary

Cloudinary inashughulikia media tofauti na faili za binary. Ukijaribu kupakia PDF kama picha, upakiaji utafeli.

Lazima utumie resource_type=raw kwenye URL yako ya upakiaji.

Mfano wa kodi:

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

Muundo wa Data

Usitegemee Cloudinary kukupa majina ya faili baadaye. Ni vigumu kuyatoa kutoka kwenye URL.

Hifadhi vitu hivi vitatu kwenye Firebase wakati wa upakiaji:

  • docUrl
  • fileName
  • fileSize

Hii inaruhusu "chat bubble" kuonyeshwa papo hapo bila maombi (requests) ya ziada.

Kiolesura cha Mtumiaji

"Document bubble" inajumuisha:

  • Mandhari ya bluu ya uwazi (translucent).
  • Ikoni kulingana na aina ya faili (kama 📄 kwa PDF au 📊 kwa Excel).
  • Jina la faili na ukubwa wa faili.
  • Kitufe cha kupakua (download).

Mambo ya Kuzingatia

  • Cloudinary Presets: Hakikisha "unsigned preset" yako imewekwa kwenye auto. Ikiwa imewekwa kwa ajili ya sauti pekee, upakiaji wa PDF utarudisha kosa la 400 (400 error).
  • Makosa ya JavaScript: Unapoongeza matawi mapya kwenye "nested ternary operators", mabano moja ya ziada yataharibu kodi yako. Kagua sintaksi yako kwa makini.
  • Aina za Faili: Mfumo sasa unasaidia PDF, DOCX, XLSX, PPTX, TXT, CSV, ZIP, na RAR.

Mfumo unabaki kuwa rahisi: upakiaji wa CDN, hifadhi ya Firebase, na uonyeshaji (rendering) upande wa mteja.

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