ionic Angular 9 wait until file download url is available - javascript

I am using ionic 5 and angular 9 to upload a data url to firebase storage. My code works good but i am not sure how to wait until the download url is avaialble.
below is the code
uploadToFireStore(imageData){
const storage = getStorage();
const storageRef = ref(storage, (new Date().getTime().toString()));
uploadString(storageRef, imageData, 'data_url').then((snapshot) => {
getDownloadURL(snapshot.ref).then((downloadURL) => {
console.log('File available at', downloadURL);
this.downloadURL = downloadURL
});
});
}
I am calling it in my camera plugin like this
this.uploadToFireStore(base64Image)
console.log("updated with url:", this.downloadURL)
currently the download url is printed later and my code is not waiting for download url to be there. I need this url to upload to my RTDB so please advise how can i do it without moving the code into this part
getDownloadURL(snapshot.ref).then((downloadURL) => {
...

You probably just need to return your promise chain:
uploadToFireStore(imageData){
const storage = getStorage();
const storageRef = ref(storage, (new Date().getTime().toString()));
return uploadString(storageRef, imageData, 'data_url').then((snapshot) => {
return getDownloadURL(snapshot.ref).then((downloadURL) => {
console.log('File available at', downloadURL);
this.downloadURL = downloadURL
});
});
}
Then you can do this:
this.uploadToFireStore(base64Image).then(() => {
console.log("updated with url:", this.downloadURL)
});

Related

Uploading file to Firebase Storage with v9 SDK results in 9 byte file, instead of he actual data [duplicate]

im using react native and firebase (v9) to upload image to firebase. in the firebase storage, the file was uploaded, but the size is only 9 bytes so it's not opening properly. I'm not sure how to fix this :S
const uploadFiles = (file, name, storeKey) => {
if(!file){
console.log('no file exists')
return;
}
const exe = file.substring(file.lastIndexOf('.'));
const fileName = name + exe;
const storageRef = ref(storage, `/files/${fileName}`);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on('state_changed', null,
(error) => {
alert(error);
},
() => {
getDownloadURL(uploadTask.snapshot.ref)
.then((URL) => {
setDoc(doc(db, 'Store', storeKey, 'coffeeDB', name), {postImage: URL}, {merge: true});
console.log('url registered')
});
}
)
}
Given that you're calling file.substring(...), it seems that file is a file name. You can't upload a file by just passing its name, as that'd be a security risk. Instead you'll need to pass a Blob | Uint8Array | ArrayBuffer as shown here and here, typically by passing the File reference from which you got the file name.

react firebase image post 400 error on uploading

I am trying to upload an image to a cloud storage and received an post 400 error
The file is in initialize in another component.
Thanks for help
const projectStorage = getStorage();
useEffect(() => {
const storageRef = ref(projectStorage, file.name);
uploadBytes(storageRef, file).then((snap) => {
let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
setProgress(percentage);
console.log('File Uploaded');
}, (err) => {
setError(err);
}, async () => {
//this url doesnt change the setstate url becuase it is in seperate score
const url = await storageRef.getDownloadURL();
setUrl(url);
})
}, [file]);
I created a new project on firebase and then change the permissions on the storage rules and its works.

Firebase v9 uploading image shows only 9 bytes

im using react native and firebase (v9) to upload image to firebase. in the firebase storage, the file was uploaded, but the size is only 9 bytes so it's not opening properly. I'm not sure how to fix this :S
const uploadFiles = (file, name, storeKey) => {
if(!file){
console.log('no file exists')
return;
}
const exe = file.substring(file.lastIndexOf('.'));
const fileName = name + exe;
const storageRef = ref(storage, `/files/${fileName}`);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on('state_changed', null,
(error) => {
alert(error);
},
() => {
getDownloadURL(uploadTask.snapshot.ref)
.then((URL) => {
setDoc(doc(db, 'Store', storeKey, 'coffeeDB', name), {postImage: URL}, {merge: true});
console.log('url registered')
});
}
)
}
Given that you're calling file.substring(...), it seems that file is a file name. You can't upload a file by just passing its name, as that'd be a security risk. Instead you'll need to pass a Blob | Uint8Array | ArrayBuffer as shown here and here, typically by passing the File reference from which you got the file name.

Cannot get Url from filebase storage?

I am trying to retrieve data url from firebase storage. I have a static function to get url, but the return is always undefined? How can I get the url of the file and store to my database?
uploadImageByDataURL(image, imageName, directory) {
const uploadTask = firebase.storage().ref(`images/${directory}/${imageName}`).putString(image, 'data_url');
uploadTask.on('state_changed', () => {
firebase.storage().ref(`images/${directory}`).child(`${imageName}`).getDownloadURL().then(url => {
return url
})
})
}
Retrieving the download URL happens asynchronously. Any code that requires the download URL, should be in the corresponding then() block. So:
const uploadTask = firebase.storage().ref(`images/${directory}/${imageName}`).putString(image, 'data_url');
uploadTask.on('state_changed', () => {
firebase.storage().ref(`images/${directory}`).child(`${imageName}`).getDownloadURL().then(url => {
firebase.database().reference().set(url);
})
})

Firebase Storage: How to store image url as an object property?

I am uploading an image to firebase storage and retrieving its downloadURL. I have created a ADS node in firebase database and a newAd object in its node.
What i want is that the downloadURL of that image is saved in newAd.picLink i.e property of newAd(Object).
addSubmitted.addEventListener("click", e => {
const newAds = _db.ref("ADS").push();
const newAd = {};
const ref = firebase.storage().ref();
const file = $("#exampleInputFile").get(0).files[0];
const name = +new Date() + "-" + file.name;
const task = ref.child(name).put(file, { contentType: file.type });
task.snapshot.ref.getDownloadURL().then(downloadURL => {
console.log("File available at", downloadURL);
newAd.picLink = downloadURL; /*this isn't working how can i set
downloadURL as newAd objects property*/
});
});
You're not writing anything to the database after the file has been uploaded. The simplest fix is to update newAds in there:
task.snapshot.ref.getDownloadURL().then(downloadURL => {
console.log("File available at", downloadURL);
newAdS.update({ picLink: downloadURL });
});

Categories

Resources