CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-databasefirebase-storage
mur7ay
mur7ay

Reputation: 833

Error While Working With Firebase Storage

This is my first attempt working with Firebase storage and I'm following this tutorial provided by Firebase:

https://www.youtube.com/watch?v=SpxHVrpfGgU

I've seem to follow the tutorial step-by-step, however, I'm getting the following error and I can't find a solution for it: 

firebase-storage.js:3469 Uncaught Error: No Storage Bucket defined in Firebase Options.
    at t.ref (firebase-storage.js:3469)
    at HTMLInputElement.<anonymous> (myFile.js:18)

When I click on 't.ref' it leads me to the following catch: 

catch(error) {
   throw new Error(
       'Cannot instantiate firebase-storage.js - ' +
       'be sure to load firebase-app.js first.'
)

Here's my HTML: 

<!doctype html>

<html lang="en">

<head>
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="stylesheets.css" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://www.gstatic.com/firebasejs/4.1.5/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "...",
            authDomain: "...",
            databaseURL: "...",
            projectId: "...",
            storageBucket: "",
            messagingSenderId: "..."
        };
        firebase.initializeApp(config);
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
    <nav>...</nav>

    <progress value="0" max="100" id="uploader" style="margin-top: 35px;">0%</progress>
    <input type="file" value="uploader" id="fileButton" />

    <script src="myFile.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

</body>

</html>

And my corresponding Javascript: 

// Get elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');

// Listen for file selection
fileButton.addEventListener('change', function(e) {
    // Get file
    var file = e.target.files[0];

    // Create a storage reference
    var storageRef = firebase.storage().ref('mover_docs/' + file.name);

    // Upload a file
    var task = storage.put(file);

    // Update progress bar
    task.on('state_changed',

        function progress(snapshot) {
            var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            uploader.value = percentage;
        },

        function error(err) {

        },

        function complete() {

        }
    );
});

I guess my primary question is, is this error occurring since the storageBucket found within the initialize Firebase area has an empty value or am I missing something else?

Upvotes: 1

Views: 4022

Answers (2)

kkost
kkost

Reputation: 3740

In my case, I simply by inattention added white space at the end of bucket URL. Hope somebody will help this because I spent an half of an hour to find this.

storageBucket: "appname.appspot.com "

Upvotes: 0

mur7ay
mur7ay

Reputation: 833

What needed to be done is copy the link within the 'storage' tab on your Firebase projected above your empty file. It looks something similar to this:

gs://projectName-ci4w0.appspot.com/

Now, just remove the gs:// and the last forward slash after .com. Place this newly formed link into the rules sections in Firebase for Storage like so: 

 match /b/projectName-ci4w0.appspot.com/o {

Finally, place the same new link within the initialization section for Firebase in your code like so: 

<script>
  var config = {
     apiKey: "...",
     authDomain: "...",
     databaseURL: "...",
     projectId: "...",
     storageBucket: "projectName-ci4w0.appspot.com",
     messagingSenderId: "..."
};
firebase.initializeApp(config);
</script>

That's it!

Upvotes: 6

Related Questions