Firebase Storage Integration

🔥 Firebase Storage Integration in React Native

Image, File, PDF, Video Upload + URL Retrieve + Display + Delete (Complete Bengali Guide)

📌 Firebase Storage কী?

Firebase Storage হলো Google Cloud Storage–এর উপরে তৈরি একটি highly scalable file storage system। React Native অ্যাপে আমরা সহজেই image, pdf, video, audio বা যেকোনো file upload করতে পারি এবং URL নিয়ে অ্যাপে দেখাতে পারি।

Firebase Storage–এর মাধ্যমে তুমি করতে পারবে:

  • 📤 Image Upload
  • 📄 File/PDF Upload
  • 🎞 Video Upload
  • 📥 URL Retrieve
  • 🖼 Uploaded Image Display
  • ❌ File Delete from Storage
  • 🔐 Secure Storage Rules Control

⚙️ Step 1: Firebase Storage Setup

প্রথমে Firebase Console-এ গিয়ে Storage Enable করতে হবে:

  1. Firebase Console → Build → Storage
  2. Get Started → Storage Location Select
  3. Rules Public বা Auth Required সেট করো
// Allow only authenticated users
allow read, write: if request.auth != null;
    

📦 Step 2: Install Required Packages

npm install @react-native-firebase/app
npm install @react-native-firebase/storage
npm install react-native-image-picker
    

🖼 Step 3: Select Image from Device

import {launchImageLibrary} from "react-native-image-picker";

const pickImage = async () => {
  const result = await launchImageLibrary({mediaType: "photo"});
  return result.assets[0];
};
    

📤 Step 4: Upload Image to Firebase Storage

import storage from "@react-native-firebase/storage";

const uploadImage = async (image) => {
  const fileName = `images/${Date.now()}.jpg`;
  const reference = storage().ref(fileName);

  await reference.putFile(image.uri);
  const url = await reference.getDownloadURL();

  return {url, fileName};
};
    

🖥 Step 5: Uploaded Image Display করা

<Image 
   source={{ uri: imageUrl }} 
   style={{ width: 200, height: 200, borderRadius: 10 }} 
/>
    

📄 Step 6: File / PDF Upload

PDF বা অন্য যেকোনো file upload করতে পারো:

const uploadFile = async (fileUri) => {
  const name = `files/${Date.now()}`;
  const reference = storage().ref(name);

  await reference.putFile(fileUri);
  const url = await reference.getDownloadURL();

  return url;
};
    

🎞 Step 7: Video Upload Example

const uploadVideo = async (video) => {
  const fileName = `videos/${Date.now()}.mp4`;
  const ref = storage().ref(fileName);

  await ref.putFile(video.uri);
  return await ref.getDownloadURL();
};
    

❌ Step 8: Delete File from Storage

const deleteFile = async (filePath) => {
   await storage().ref(filePath).delete();
   console.log("Deleted Successfully!");
};
    

📊 Upload Progress দেখানো

reference.putFile(image.uri).on("state_changed", task => {
  const percent = (task.bytesTransferred / task.totalBytes) * 100;
  console.log("Upload: " + percent + "%");
});
    

🌟 Best Practices

  • ✔ Storage Rules কখনো Public রাখবে না
  • ✔ Image size কমানোর জন্য compressor ব্যবহার করো
  • ✔ File name unique করো (Date.now()/UUID)
  • ✔ Uploaded file info Firestore–এ store করা ভালো
  • ✔ App uninstall হলে local URI নষ্ট হয়ে যায় – তাই সবসময় downloadURL ব্যবহার করো

🎉 Conclusion

Firebase Storage React Native–এ File Handling–এর জন্য সবচেয়ে powerful system। তুমি image, pdf, video যাই upload করতে চাও না কেন—Firebase Storage সবটাই সহজ করে দেয়। উপরের guide–এ Upload + Get URL + Display + Delete সব এক জায়গায় দেওয়া হয়েছে।

👼 Quiz
/

লোড হচ্ছে...