CODEWITHSUNDEEP
javascriptangularjsfirebaseurlstorage
zlyt
zlyt

Reputation: 269

Cant get firebase image URL from storage right after uploading

I'm using firebase storage for an app so that I can store images I want to be displayed in a popup window. Right now I can reference the image but I'm unable to get the URL for the image using getDownloadURL().

I've tried everything but can't seem to get the URL and only get errors in the console saying Error: Reference.push failed: the first argument contains undefined in property 'markers.imageURL.i'", AND " Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404)

Anyone know why?

Heres a snippet of my code. imageFURLY is what doesn't return the URL. 

document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
                    // This function saves the newly created marker and the infowindow information when
                    //the 'Submit' button is clicked.

                    var fileInput = document.getElementById('fileInput');
                    var file = fileInput.files[0];
                    //Create storage ref
                    var storageRef = firebase.storage().ref('markerpics/' + file.name);
                    var task = storageRef.put(file);
                    
                    console.log('storageRef ', storageRef)
                    imageFURL = storageRef;
                    console.log('imageFURL ', imageFURL);
                    //Upload file
                    imageFURLY = imageFURL.getDownloadURL();
                    console.log('imageFURLY ', imageFURLY);


                    //Variables that store data inputted in infowindow
                    var postName = document.getElementById('formName');
                    var postNameF = postName.value;
                    var postMessage = document.getElementById('formMessage');
                    var postMessageF = postMessage.value;
                    var postImageRef = imageFURLY;
                    console.log('postImageRef - URL: ', postImageRef);
                    var latitude = location.lat(location);
                    var longitude = location.lng(location);


                    //Closes markers open infowindow
                    largeInfowindow.close(map, marker);
                    //Sets markers infowindow to NEW content
                    console.log('Setting infowindow content!! ');
                    largeInfowindow.setContent('<div>' + '<div>Name: ' + postNameF + '</div><br>' + '<div>Message: ' + postMessageF + '</div><br>' + '<div>Image: ' + '</div>' + '<img style="height: 100px; width: 100px;" src="' + postImageRef + '" alt="Mountain View">' + '<br>' + '</div>');
                    console.log('Set infowindow content!! ');
                    largeInfowindow.open(map, marker);
                    // Make sure the marker property is cleared if the infowindow is closed.
                    largeInfowindow.addListener('closeclick', function () {
                        largeInfowindow.marker = null;
                    });

Upvotes: 1

Views: 2017

Answers (2)

Oliver Dixon
Oliver Dixon

Reputation: 7405

let file = await bucket.upload(fromFilePath, {destination: toFilePath});
const trimUrl = file[0].metatata.mediaLink

Upvotes: 0

Ivan Rubinson
Ivan Rubinson

Reputation: 3329

I'm willing to bet you're trying to get the URL of something that doesn't exist yet.

document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);

All fine so far

var task = storageRef.put(file);

That's deferred. task is a promise.

console.log('storageRef ', storageRef)
imageFURL = storageRef;
console.log('imageFURL ', imageFURL);
//Upload file
imageFURLY = imageFURL.getDownloadURL();

put hasn't been executed yet, but you're calling getDownloadURL(). Therefore, it's not there yet! And you get a 404.

Here's how you fix it:

document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);

var task = storageRef.put(file);
task.then(function(snapshot) {
    console.log('storageRef ', storageRef)
    imageFURL = storageRef;
    console.log('imageFURL ', imageFURL);
    //Upload file
    imageFURLY = imageFURL.getDownloadURL();
    // ...
});

Upvotes: 2

Related Questions