Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การอัปโหลดและแสดงรูปภาพด้วย Firebase Storage

บทที่ 7: การอัปโหลดและแสดงรูปภาพด้วย Firebase Storage

🔖 หมวดบทเรียน: การจัดการไฟล์และรูปภาพด้วย 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 ที่เชื่อถือได้และปลอดภัย