🔖 หมวดบทเรียน: การจัดการไฟล์และรูปภาพด้วย Firebase Storage
📌 เหมาะสำหรับ: แอปที่มีฟีเจอร์อัปโหลด/แสดงรูป เช่น โพสต์, โปรไฟล์, แกลเลอรี่
🎯 เป้าหมาย: เข้าใจการอัปโหลดรูปภาพจากแอป Flutter ไปเก็บใน Firebase Storage และแสดงผลผ่าน URL
🧭 เกริ่นนำ
Firebase Storage เป็นบริการจัดเก็บไฟล์บน Cloud ที่เหมาะกับรูปภาพ วิดีโอ หรือไฟล์อื่น ๆ ในแอป Flutter เราสามารถใช้ร่วมกับ image_picker
เพื่อเลือกรูปจากเครื่อง และ firebase_storage
เพื่ออัปโหลดรูปนั้นขึ้น Cloud ได้อย่างง่ายดาย
📦 ติดตั้งแพ็กเกจ
dependencies:
firebase_core: ^2.27.0
firebase_storage: ^11.6.0
image_picker: ^1.1.0
⚙️ ตั้งค่า Permissions
Android: แก้ไข AndroidManifest.xml
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
🧪 ตัวอย่างการเลือกรูปแล้วอัปโหลด
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
class UploadImagePage extends StatefulWidget {
@override
_UploadImagePageState createState() => _UploadImagePageState();
}
class _UploadImagePageState extends State<UploadImagePage> {
File? _image;
String? _uploadedURL;
Future<void> pickAndUpload() async {
final picker = ImagePicker();
final picked = await picker.pickImage(source: ImageSource.gallery);
if (picked != null) {
setState(() => _image = File(picked.path));
final ref = FirebaseStorage.instance.ref().child("images/\${DateTime.now().millisecondsSinceEpoch}.jpg");
await ref.putFile(_image!);
final url = await ref.getDownloadURL();
setState(() => _uploadedURL = url);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('อัปโหลดรูปภาพ')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_image != null ? Image.file(_image!, height: 150) : Placeholder(fallbackHeight: 150),
SizedBox(height: 20),
ElevatedButton(onPressed: pickAndUpload, child: Text('เลือกรูปและอัปโหลด')),
if (_uploadedURL != null)
Text('URL: \$_uploadedURL', style: TextStyle(fontSize: 12)),
],
),
);
}
}
✅ สรุป
- ใช้
image_picker
เลือกรูปจากอุปกรณ์ - ใช้
firebase_storage
อัปโหลดรูปขึ้น Cloud - สามารถใช้ URL ที่ได้แสดงรูปภาพในแอป หรือบันทึกลง Firestore
บทถัดไปเราจะไปต่อที่ การจัดการฟอร์มขั้นสูงและ Form Validation เพื่อสร้าง UI ที่เชื่อถือได้และปลอดภัย