I am attempting to upload an image and store its URL in a Firestore document. To achieve this, I have the following code snippet:
This function uses the device camera to capture the photo.
selectImage(): Promise<any> {
return new Promise(resolve => {
let cameraOptions: CameraOptions = {
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
correctOrientation: true
};
this.camera.getPicture(cameraOptions)
.then((data) => {
this.cameraImage = "data:image/jpeg;base64," + data;
resolve(this.cameraImage);
});
});
}
The next step involves uploading the image and updating the document with the generated URL.
uploadProfilePhoto() {
console.log(this.cameraImage)
if (this.cameraImage != null) {
this.image = 'profilePhoto' + new Date().getTime() + '.jpg';
let storageRef: any;
let parseUpload: any;
storageRef = firebase.storage().ref('profilePhotos/' +
this.image);
parseUpload = storageRef.putString(this.cameraImage,
'data_url');
let ID = firebase.auth().currentUser.uid;
console.log("ID")
console.log(ID);
parseUpload.on('state_changed', (snapshot) => {
// Upload completed successfully, now we can get the
download URL
snapshot.ref.getDownloadURL().then((downloadURL) => {
let profilePhoto = downloadURL
this.firestore.doc(`users/${ID}`).update({
profilePhoto
})
});
})
}
}
Despite successful image uploads, there are instances where the document update does not occur, leading to the error message:
Failed to load resource: the server responded with a status of 404
Upon inspection of the link in the error message, it appears as shown here.
This error occurs consistently whenever the code is executed, appearing multiple times per operation.