Firebase error Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File

Question

I am trying to upload an image from local device to Firebase but when I open the web page that should do this i get this error and it doesn't work. I get this error BEFORE the click on the submit button, as i open the page I get the error.

Thanks

<div id="filesubmit">
  <input type="file" id="caricaFile" class="file-select" accept="image/*"/>
  <button class="file-submit">SUBMIT</button>
</div>
          try{// Initialize Firebase
          var config = {
            apiKey: "AIzaSyA5-N-IEZDs9XYhmMCpSvyByp0OlTR-bhs",
            authDomain: "hackathon-76f01.firebaseapp.com",
            databaseURL: "https://hackathon-76f01.firebaseio.com",
            projectId: "hackathon-76f01",
            storageBucket: "hackathon-76f01.appspot.com",
            messagingSenderId: "1040124036693"
          };

          firebase.initializeApp(config);

          var storageRef = firebase.storage().ref(); // use the Blob or File API

        // Create a reference to 'mountains.jpg'
        var mountainsRef = storageRef.child('mountains.jpg');

        // Create a reference to 'images/mountains.jpg'
        var mountainImagesRef = storageRef.child('images/mountains.jpg');

        var file = document.getElementById("caricaFile").value

        storageRef.put(file).then(function(snapshot) {
          console.log('Uploaded a blob or file!');
        });

        var metadata = {
          contentType: 'image/jpeg',
        };

        // Upload the file and metadata
        var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);
         }
        catch(err){
        console.log("errore");
        console.log(err);
        }

What exactly is caricaFile? Is there an HTML form that goes along with this code? — Doug Stevenson
And did you select a file to be uploaded using that form, before the code runs? — Doug Stevenson

GaryB GaryB · Accepted Answer · 2019-02-11T16:46:49

I dont know if the try/catch block is required or not, but I guess it should work like this:

<div id="filesubmit">
   <input type="file" id="caricaFile" class="file-select" accept="image/*"/>
   <button class="file-submit" onclick="fileUpload(event)">SUBMIT</button>
</div>

      try{// Initialize Firebase
      var config = {
        apiKey: "AIzaSyA5-N-IEZDs9XYhmMCpSvyByp0OlTR-bhs",
        authDomain: "hackathon-76f01.firebaseapp.com",
        databaseURL: "https://hackathon-76f01.firebaseio.com",
        projectId: "hackathon-76f01",
        storageBucket: "hackathon-76f01.appspot.com",
        messagingSenderId: "1040124036693"
      };

      firebase.initializeApp(config);
        function fileUpload(event){
            var storageRef = firebase.storage().ref(); // use the Blob or File API
            var file=event.target.files[0]
            storageRef.put(file).then(function(snapshot) {
            console.log('Uploaded a blob or file!');
            });

            var metadata = {
            contentType: 'image/jpeg',
            };

            // Upload the file and metadata
            var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);
        }

     }
    catch(err){
    console.log("errore");
    console.log(err);
    }

Firebase error Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File

1 Answers