Nội dung bài viết

Video học lập trình mỗi ngày

Chúng ta đều biết rằng firebase database làm rất tốt khi có Firebase Realtime database. Nhưng bạn có biết rằng Firebase cũng tuyệt vời để uploading data và files lên Firebase Storage riêng của ứng dụng của bạn MIỄN PHÍ không? Trong bài viết tiếp theo này chúng ta sẽ đi và vấn đề upload file miễn phí dùng Firebase Realtime database.

Trong bài viết tiếp theo này chúng ta sẽ đi và vấn đề upload file miễn phí dùng firebase.

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Và để tiếp theo cho việc tận dụng hết chức năng của firebase chúng ta tiếp tục bài viết này. Cho đến nay, chúng tôi đã tương tác chủ yếu với FirebaseAuth và Firebase Realtime database. ở bài viết này, chúng ta sẽ có cái nhìn đầu tiên về Firebase Realtime database, được xây dựng trên nền tảng lưu trữ đám mây của Google. Cả Snapchat và Spotify đều đang sử dụng cùng một cơ sở hạ tầng của Google trong sản xuất.

Trong phần này, bạn sẽ tìm hiểu cách store media, cụ thể là file, sử dụng Firebase.

Lợi ích khi dùng host firebase database

performance thì quá tuyệt vời
miễn phí
cdn tích hợp sẵn

Cũng giống như những bài trước chúng ta chia thành 2 phần

Link demo phía dưới bài viết

Ở bài trước chúng ta đã nói về FirebaseAuth cụ thể là bài viết "Hướng Dẫn Xác Thực Tài Khoản Login Bằng SMS, Miễn Phí Sử Dụng Firebase" Đó là điều tuyệt vời nhất với tính năng xác thực hiện tại. Các bạn nên đọc và sử dụng theo cách đó để xác thực một tài khoản. Miễn phí những rất chất lên tới 20K.

1 - HTML

<div id="container">
    <h3>Upload file using firebase</h3>
    <input type="file" id="fileButton" name="">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>

    <div id="loaded">
        <div id="main">
            <div id="user-signed-in">
                <div id="user-info">
                    <div id="photo-container">
                        <img id="photo">
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>

</div>

Một demo đơn giản nên phần html cũng đơn giản, không cần cầu kỳ. Chỉ cần bạn hiểu việc upload như thế nào là ok.

2 - Javascript

Nói trước là các bạn cũng có thể dùng jquery hay gì đó tuỳ các bạn. Riêng mình thì chỉ thích xài javascript thôi, cho nên đững comment hay pm cho mình thay lại jquery là được. áh há

<script>
(function() {

    console.log('connect to firebase');

    // Initialize Firebase
    var firebaseConfig = {
        apiKey: "xxxxxx",
        authDomain: "xxxxx",
        databaseURL: "xxxxx",
        projectId: "xxxxx",
        storageBucket: "xxxxx",
        messagingSenderId: "xxxxx",
        appId: "xxxxxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();


    /**
     * Initializes the app.
     */
    var initApp = function() {

        const fileButton = document.getElementById('fileButton');

        if (!!fileButton) {

            fileButton.addEventListener('change', function(e) {

                uploadFile(e.target.files[0])

            });
        }


    };

    function uploadFile(file) {

        // var newMetadata = {
        //   cacheControl: 'public,max-age=300',
        //   contentType: 'image/jpeg',
        //   contentLanguage: null,
        //   customMetadata: {
        //     whatever: 'we feel like',
        //   },
        // };

        // Create the file metadata
        var metadata = {
            contentType: 'image/jpeg',
        };
        var uploadTask = firebase.storage().ref('img/' + Date.now()).put(file, metadata);

        // Listen for state changes, errors, and completion of the upload.
        uploadTask.on(
            firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
            function(snapshot) {
                // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                var progress = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                progressBar.value = progress;
                console.log('Upload is ' + progress + '% done');
                switch (snapshot.state) {
                    case firebase.storage.TaskState.PAUSED: // or 'paused'
                        console.log('Upload is paused');
                        break;
                    case firebase.storage.TaskState.RUNNING: // or 'running'
                        console.log('Upload is running');
                        break;
                }
            },
            function(error) {
                // Errors list: https://firebase.google.com/docs/storage/web/handle-errors
                switch (error.code) {
                    case 'storage/unauthorized':
                        // User doesn't have permission to access the object
                        break;

                    case 'storage/canceled':
                        // User canceled the upload
                        break;

                    case 'storage/unknown':
                        // Unknown error occurred, inspect error.serverResponse
                        break;
                }
            },
            function() {
                // Upload completed successfully, now we can get the download URL

                uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
                    console.log('File available at', downloadURL);
                    var _img = document.getElementById('photo');
                    var newImg = new Image;
                    newImg.onload = function() {
                        _img.src = this.src;
                    }
                    newImg.src = downloadURL;

                });

            }
        );
    }


    window.addEventListener('load', initApp);

}())
</script>

3 - Giải thích sơ qua về javascript

# Initialize Firebase

Cũng như những phần khác, đó là việc khởi tạo Initialize Firebase không thể thiếu.

var firebaseConfig = {
    apiKey: "xxxxxx",
    authDomain: "xxxxx",
    databaseURL: "xxxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxx",
    appId: "xxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var database = firebase.database();

#window init

Khi một website load xong thì function này sẽ được khởi tạo, cũng không khó lắm đúng không? trong đó initApp sẽ tạo sự kiện change input trước

var initApp = function() {

    const fileButton = document.getElementById('fileButton');

    if (!!fileButton) {

        fileButton.addEventListener('change', function(e) {

            uploadFile(e.target.files[0])

        });
    }


}

window.addEventListener('load', initApp);

#uploadFile - hàm chính

Hàm này là hàm dùng để upload lên trong đó có những thứ cần hiểu Chúng ta có thể set meta một image trước khi up lên host firebase.

var newMetadata = {
  cacheControl: 'public,max-age=300',
  contentType: 'image/jpeg',
  contentLanguage: null,
  customMetadata: {
    whatever: 'we feel like',
  },
};

đường dẫn tới thư mục dạng như thế này // https://firebasestorage.googleapis.com/v0/b/xxxxxx.appspot.com/o/img

var uploadTask = firebase.storage().ref('img/' + Date.now()).put(file, metadata);

#getDownloadURL

Dùng đề download hình ảnh về

uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    //process here
})

4 - DEMO