Firebase Storage Put could not get object

Question

Using the WEB version of the SDK to store an image to Firebase Storage. File DOES get uploaded but keep getting the following message when trying to get the download URL

code:"storage/object-not-found"
message:"Firebase Storage: Object 'rainbow_photos/daniel.jpg' does not exist."
name:"FirebaseError"
serverResponse:"{↵  "error": {↵    "code": 404,↵    "message": "Not Found.  Could not get object"↵  }↵}"

But the file daniel.jpg DOES get stored in the rainbow_photos folder.

Here's how we are putting the file:

rainbowPhotoUploader.addEventListener('change', function(e){
    //Get file
    var file = e.target.files[0];
    //Create a storage ref
    var storageRef = firebase.storage().ref('rainbow_photos/' + file.name);
    //Upload file
    storageRef.put(file);
    //Get URL and store to pass
    storageRef.getDownloadURL().then(function(result){
        $('#rainbowPhotoURL').val(result);
    });   
  });

Solution 1

Basically what Austin said, except we're smart (we are, trust me!) and we'll return the download URL in the promise after upload so you don't have to do the second fetch:

rainbowPhotoUploader.addEventListener('change', function(e){
  //Get file
  var file = e.target.files[0];
  //Create a storage ref
  var storageRef = firebase.storage().ref('rainbow_photos/' + file.name);
  //Upload file
  storageRef.put(file).then(function(snapshot){
    $('#rainbowPhotoURL').val(snapshot.downloadURL);
  });
});

Solution 2

You're getting the download link immediately after uploading, and it is not finished yet.

Do this to get the link after it's done uploading:

rainbowPhotoUploader.addEventListener('change', function(e){
//Get file
var file = e.target.files[0];
//Create a storage ref
var storageRef = firebase.storage().ref('rainbow_photos/' + file.name);
//Upload file
storageRef.put(file).then(function(result){
    //Get URL and store to pass
    storageRef.getDownloadURL().then(function(result){
        $('#rainbowPhotoURL').val(result);
    }); 
});
});

Solution 3

Use "then" for the second time will fire after the file was successfully uploaded. Sorry for my bad English. https://firebase.google.com/docs/storage/web/upload-files

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

        var file = e.target.files[0];

        var storageRef = firebase.storage().ref('rainbow_photos/' + file.name);

        storageRef.put(file).then(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;

            console.log('Upload is ' + progress + '% done');

        }).then(function() {
            // Upload completed successfully, now we can get the download URL
            storageRef.getDownloadURL().then(function(downloadURL) {
                console.log('File available at', downloadURL);
            });
        });
    });

Solution 4

For [email protected] (Front-end SDK)

❌ Below code will throw the error-code:"storage/object-not-found" But the weird part is the file actually has been uploaded.

/**
 * @param {String} pathToName folder/filename
 * @param {Object} file e.target.files[0]
 * @returns {Promise} Resolve the URL of the file
 */
export const uploadFile = (pathToName, file) => {
  const task = firebase.storage().ref(pathToName).put(file);
  return task.snapshot.ref.getDownloadURL();
};

✅ A working example in [email protected]

/**
 * @param {String} pathToName folder/filename
 * @param {Object} file e.target.files[0]
 * @returns {Promise} Resolve the URL of the file
 */
export const uploadFile = (pathToName, file) =>
  new Promise((resolve, reject) => {
    const task = firebase.storage().ref(pathToName).put(file);
    const taskProgress = snapshot => {};
    const taskError = reject;
    const taskCompleted = () => {
      task.snapshot.ref
        .getDownloadURL()
        .then(resolve)
        .catch(reject);
    };
    task.on("state_changed", taskProgress, taskError, taskCompleted);
  });

View more solutions

Comments

[hello world]

howd you debug this? wouldve never guessed that the upload wasnt finished yet

[Aubtin Samai]

It's been a while since I've used this, but probably ran into this when trying to fetch the content immediately after upload and having it not exist and be an empty file.