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
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.
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.
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.
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);
})
})
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 });
});