Firebase & Supabase • المستوى الثاني • الدرس 2

تخزين الملفات والصور (Firebase Storage)

أهداف الدرس العلمية

رفع الملفات بـ uploadBytes وتتبع التقدم بـ uploadBytesResumable.
الحصول على روابط الملفات بـ getDownloadURL وحذفها بـ deleteObject.
التحقق من نوع الملف وحجمه قبل الرفع.
عرض الملفات بـ listAll.

1. لماذا Firebase Storage؟

Firebase Storage يوفر تخزيناً سحابياً آمناً وقابلاً للتوسع، مع تكامل كامل مع Firestore و Firebase Auth. مثالي لصور الملفات الشخصية، مرفقات الدردشة، والوسائط.

javascript

// تهيئة Storage
const storage = getStorage();

// الرفع
const fileRef = ref(storage, "users/101/avatar.png");
await uploadBytes(fileRef, file);

// الرابط
const url = await getDownloadURL(fileRef);

2. أنواع الرفع

uploadBytes

رفع بسيط. مناسب للملفات الصغيرة.

uploadBytesResumable

تتبع التقدم. ضروري للصور الكبيرة والفيديو.

3. قواعد أمان Storage

javascript

// storage.rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth.uid == userId
                   && request.resource.size < 5 * 1024 * 1024
                   && request.resource.contentType.matches('image/.*');
    }
  }
}

التطبيق العملي المباشر

تحدي الدرس الثاني: نظام رفع متكامل

أضف uploadBytesResumable و deleteObject و listAll للـ imports.
أنشئ دالة uploadWithProgress مع task.on("state_changed").
أنشئ دالة uploadImage تتحقق من النوع والحجم.
أنشئ دالة deleteFile(filePath) تستدعي deleteObject.
أنشئ دالة listUserFiles(userId) تستدعي listAll.
أضف اختبار تلقائي.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث