Firebase Chatలో డాక్యుమెంట్లను ఎలా అప్‌లోడ్ చేయాలి

సేల్స్ టీమ్ కోసం చాట్ యాప్‌ను రూపొందించడానికి కేవలం టెక్స్ట్ మరియు చిత్రాలు మాత్రమే సరిపోవు. ఆపరేటర్లు తరచుగా PDFలు, Word ఫైళ్లు మరియు Excel షీట్లను షేర్ చేయాల్సి ఉంటుంది.

నేను Cloudinaryని ఉపయోగించి Firebase చాట్ సిస్టమ్‌కు డాక్యుమెంట్ సపోర్ట్‌ను జోడించాను. దాని సాంకేతిక వివరాలు ఇక్కడ ఉన్నాయి.

సాంకేతిక సెటప్ (The Technical Setup)

వాయిస్ మెసేజ్‌ల కోసం నేను ఉపయోగించిన విధానాన్నే డాక్యుమెంట్ల కోసం కూడా ఉపయోగించాను.

  • ఫైల్‌ను Cloudinaryకి అప్‌లోడ్ చేయండి.
  • URLను Firebase Realtime Databaseలో సేవ్ చేయండి.
  • క్లయింట్ సైడ్‌లో ఒక కస్టమ్ బబుల్‌ను రెండర్ చేయండి.

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

డేటా స్ట్రక్చర్ (The Data Structure)

ఫైల్ పేర్ల కోసం తర్వాత Cloudinaryపై ఆధారపడకండి. URL నుండి వాటిని సేకరించడం కష్టమవుతుంది.

అప్‌లోడ్ చేసే సమయంలో ఈ మూడు అంశాలను Firebaseలో సేవ్ చేయండి:

  • docUrl
  • fileName
  • fileSize

దీనివల్ల అదనపు రిక్వెస్ట్‌లు లేకుండా చాట్ బబుల్ వెంటనే రెండర్ అవుతుంది.

యూజర్ ఇంటర్‌ఫేస్ (The User Interface)

డాక్యుమెంట్ బబుల్‌లో ఇవి ఉంటాయి:

  • ఒక ట్రాన్స్‌లూసెంట్ బ్లూ బ్యాక్‌గ్రౌండ్.
  • ఫైల్ ఎక్స్‌టెన్షన్‌పై ఆధారపడిన ఐకాన్ (ఉదాహరణకు PDF కోసం 📄 లేదా Excel కోసం 📊).
  • ఫైల్ పేరు మరియు ఫైల్ సైజు.
  • ఒక డౌన్‌లోడ్ బటన్.

గమనించవలసిన విషయాలు (Things To Watch Out For)

  • 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