ตัวอย่างการ Upload ไฟล์ภาพเก็บไว้บน Firebase Storage

Firebase มีบริการการฝากไฟล์รูปภาพชื่อว่า Firebase Storage ในบทความนี้จะแสดงตัวอย่างการใช้งาน Upload ไฟล์รูปภาพไปเก็บไว้ใน Firebase Storage

รับทำ WebApplication

สำหรับการตั้งค่าเริ่มต้นสำหรับ Firebase ขอให้อ่านได้ใน Blog

เริ่มต้นใช้งาน Firebase Storage

เลือก Storage แล้วคลิกเริ่มต้นใช้งาน

Firebase จะสร้าง กฎเริ่มต้นว่า ก่อนจะ Upload ได้จะต้องผ่านการ Authentication ก่อน ( Blog การใช้งาน Firebase Authentication คลิก ) ให้กด รับทราบ

พร้อมใช้งาน Firebase Storage

ตัวอย่าง Code

<!DOCTYPE html>
<html lang="th">
<head>
<title>ทดสอบ Upload ไฟล์</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" ></script>
<script>
    // Initialize Firebase
    var config = {
      apiKey: "....",
      authDomain: "....",
      databaseURL: "....",
      projectId: "....",
      storageBucket: "....",
      messagingSenderId: "...."
    };
    firebase.initializeApp(config);//ตั้งค่า firebase
</script>

</head>
<body>

<div class="container">

    <br /><br />
   
    <div id="login_panel" class='text-right' >


<button class="btn btn-primary btn_login " style="display:none" > <i class="fa fa-key" ></i> เข้าสู่ระบบ </button>
          <span class="user_info" ></span> 

          <button class="btn btn-danger btn_sign_out " style="display:none" > <i class="fa fa-sign-out-alt" ></i> ออกจากระบบ </button>
    </div>



     <div id="upload_panel" style="display: none" >

            <div class="form-group">

                    <label>เลือกไฟล์</label>
                    
                    <input class="form-control-file" type="file" id="file_upload" />

                    
                     <h4 id="upload_status"></h4>

            </div>


    </div>


   <script>
var current_user=null;

firebase.auth().onAuthStateChanged(function(user) { //กำหนดชุดคำสั่งเมื่อสถานะการ login เปลี่ยน
    if (user) //กรณี login แล้ว
    {
            console.log(user);
            current_user=user;//เก็บข้อมูลของผู้ใช้ปัจจุบัน

            $("#login_panel").find(".btn_login").css("display","none");//ซ่อนปุ่ม login
            $("#login_panel").find(".btn_sign_out").css("display","");//แสดงปุ่ม ออกจากระบบ
            $("#upload_panel").css("display","");//แสดงส่วนให้ Upload ไฟล์
            $("#login_panel").find(".user_info").html(user.displayName);//แสดงชื่อผู้ใช้ที่ login

    }
    else
    {
       //กรณียังไม่ได้ login
        $("#login_panel").find(".btn_login").css("display","");//แสดงปุ่มให้ login
        $("#login_panel").find(".btn_sign_out").css("display","none");//ซ่อนปุ่มออกจากระบบ
        $("#upload_panel").css("display","none");//ซ่อนส่วนให้ Upload ไฟล์
        $("#login_panel").find(".user_info").html("");//กำหนดให้ส่วนแสดงผู้ใช้ที่ login อยู๋ เป็นค่าว่าง
}

});

$("#login_panel").find(".btn_login").on("click",function(){ //กำหนดชุดคำสั่ง เมื่อกด ปุ่ม login
//แสดงหน้าต่างให้ login โดยใช้ google account
var GoogleAuthProvider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(GoogleAuthProvider);

});
$("#login_panel").find(".btn_sign_out").on("click",function(){
//กำหนดชุดคำสั่งเมื่อกดปุ่ม ออกจากระบบ

//ออกจากระบบ โดยใช้ firebase
      firebase.auth().signOut().then(function() {
        current_user=null;//กำหนดตัวแปร object เก็บข้อมูลผู้ใช้เป็นค่า null
      });

});

$("#file_upload").on("change",function(event){ //กำหนดชุดคำสั่งเมื่อเลือกไฟล์

    var file=event.target.files[0];//เก็บ object file ไว้ในตัวแปร file

    if(file==null)//ถ้า object file เป็น null ให้ ออกจาก function
    {
        return;
    }

    var file_ref=firebase.storage().ref(file.name);//สร้าง file ใน firebase
    var task=file_ref.put(file);// upload file เข้าไปใน firebase

    //กำหนดชุดคำสั่งให้ทำงานเมื่อมีการเปลี่ยนสถานะ
    task.on("state_changed",

        function progress(snapshot){//แสดง percent ความก้าวหน้าเมื่อ upload

            var percent=( snapshot.bytesTransferred / snapshot.totalBytes)*100;//คิดค่า % ความก้าวหน้า

            //แสดง % ความก้าวหน้าที่ <h4 id="upload_status"></h4>
            $("#upload_status").html(percent+"%");
        },
        function err(err){ //กำหนดชุดคำสั่งให้ทำงานเมื่อ upload error

        },
        function complete(){ //กำหนดชุดคำสั่ง เมื่อ Upload เสร็จแล้ว

            $("#upload_status").html("");//ซ่อน % ความก้าวหน้า เมื่อ Upload เสร็จแล้ว
            $("#file_upload").val("");//ให้ input file เป็นค่าว่าง
            //แสดงรูปภาพที่ เพิ่ง Upload
   // หา URL ของ ไฟล์รูปที่เพิ่ง Upload
            firebase.storage().ref(file.name).getDownloadURL().then(function(url) {
                 //แสดงรูปภาพใน <h4 id="upload_status"></h4>
                var img=document.createElement("img");
                $(img).prop("src",url);

                $("#upload_status").html(img);

            });
        },

    );

})

   </script>
</div>

</body>
</html>