upload file to firebase storage not working

0
votes

I did read the doc over at firebase storage , but for some reason I cant get it to work.

I am using react and what I want is to be able to upload a file to my firebase storage, but I keep getting the error 

TypeError: thisRef.put(...).then is not a function

I think I need different eyes on this.

Here is my function 

uploadFile = (e) => {
e.preventDefault();
  var file = this.refs.filePath.files[0];
  var storageRef = firebase.storage().ref();

  //dynamically set reference to the file name
  var thisRef = storageRef.child(file.name);

  //put request upload file to firebase storage
  thisRef.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
  });
}

UPDATE

The file uploads to the firebase storage, but it keep complaining about the promise (.then)

Here is the file that I am working on GitHub

2
javascriptreactjsfirebasefirebase-storage
The code looks fine to me. Is there any way you can reproduce the problem in a jsbin, so we can have a look? - Frank van Puffelen
I updateded it with my gitHub repo, that might help? The file uploads to the fb Storage, but it is the promise that it complains about - Cyrus Zei

2 Answers

1
votes

You can Try something like this

async function _UpdateImage(image) {
const response = await fetch(image);
const blob = await response.blob()
const user = firebase.auth().currentUser;
if (user) {
    const storageRef = firebase.storage().ref();
    const thisRef = storageRef.child("ProfilePhoto/" + user.uid);
    thisRef.put(blob).then(function (snapshot) {
        console.log('Uploaded a blob or file!',snapshot);
    });

}

0
votes

Your script works fine on my environment. Try

console.log(thisRef.put(file));

and check thisRef.put(file) is Promise or not.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Firebase Test</title>
    <script src="https://www.gstatic.com/firebasejs/3.8.0/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            // your configs
        };
        firebase.initializeApp(config);
    </script>
</head>
<body>
    <input type="file" id="file" name="datafile">
    <script>
        function fileChange(ev) {
            var target = ev.target;
            var file = target.files[0];
            var storageRef = firebase.storage().ref();
            var thisRef = storageRef.child("public/" + file.name);
            thisRef.put(file).then(function (snapshot) {
                console.log('Uploaded a blob or file!');
            });
        }
        var inputFile = document.getElementById('file');
        inputFile.addEventListener('change', fileChange, false);
    </script>
</body>
</html>