Firebase มีบริการการฝากไฟล์รูปภาพชื่อว่า Firebase Storage ในบทความนี้จะแสดงตัวอย่างการใช้งาน Upload ไฟล์รูปภาพไปเก็บไว้ใน Firebase Storage
สำหรับการตั้งค่าเริ่มต้นสำหรับ 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> <!-- แสดง ข้อมูลผู้ใช้ ที่ login อยู่ -->
<!-- ปุ่มออกจากระบบ -->
<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 type file สำหรับเลือกไฟล์ที่จะ upload -->
<input class="form-control-file" type="file" id="file_upload" />
<!-- แสดง percent สถานะการ 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>