একটি Firebase চ্যাটে কীভাবে ডকুমেন্ট আপলোড করবেন
একটি সেলস টিমের জন্য চ্যাট অ্যাপ তৈরি করতে টেক্সট এবং ইমেজের বাইরে আরও অনেক কিছুর প্রয়োজন হয়। অপারেটরদের প্রায়শই PDF, Word ফাইল এবং Excel শিট শেয়ার করার প্রয়োজন হয়।
আমি Cloudinary ব্যবহার করে একটি Firebase চ্যাট সিস্টেমে ডকুমেন্ট সাপোর্ট যোগ করেছি। নিচে এর টেকনিক্যাল বিবরণ দেওয়া হলো।
টেকনিক্যাল সেটআপ
আমি ভয়েস মেসেজের জন্য যে প্যাটার্ন ব্যবহার করেছি, ডকুমেন্টের জন্যও ঠিক একই প্যাটার্ন ব্যবহার করেছি।
- Cloudinary-তে ফাইলটি আপলোড করুন।
- Firebase Realtime Database-এ URL-টি সেভ করুন।
- ক্লায়েন্ট সাইডে একটি কাস্টম বাবল (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
এটি অতিরিক্ত রিকোয়েস্ট ছাড়াই চ্যাট বাবলটিকে তাৎক্ষণিকভাবে রেন্ডার করতে সাহায্য করে।
ইউজার ইন্টারফেস
ডকুমেন্ট বাবলটিতে রয়েছে:
- একটি ট্রান্সলুসেন্ট (translucent) নীল ব্যাকগ্রাউন্ড।
- ফাইল এক্সটেনশনের ওপর ভিত্তি করে একটি আইকন (যেমন PDF-এর জন্য 📄 বা Excel-এর জন্য 📊)।
- ফাইলের নাম এবং ফাইলের সাইজ।
- একটি ডাউনলোড বাটন।
যে বিষয়গুলো খেয়াল রাখতে হবে
- Cloudinary Presets: নিশ্চিত করুন যে আপনার unsigned preset-টি 'auto' হিসেবে সেট করা আছে। যদি এটি শুধুমাত্র 'audio' হিসেবে সেট করা থাকে, তবে PDF আপলোড করলে 400 error আসবে।
- JavaScript Errors: নেস্টেড টারনারি অপারেটরে (nested ternary operators) নতুন ব্রাঞ্চ যোগ করার সময়, একটি অতিরিক্ত ব্র্যাকেট আপনার কোড নষ্ট করে দিতে পারে। আপনার সিনট্যাক্স সাবধানে পরীক্ষা করুন।
- File Types: সিস্টেমটি এখন PDF, DOCX, XLSX, PPTX, TXT, CSV, ZIP এবং RAR সাপোর্ট করে।
প্যাটার্নটি সহজ: CDN আপলোড, Firebase স্টোরেজ এবং ক্লায়েন্ট-সাইড রেন্ডারিং।