There is my problem.
I use ionic 4 and firebase to develop an app which can take picture and show it offline then when back online synchronise it and send it to firebase.
At the moment, i use the persistence of firebase
firebase.firestore().enablePersistence({experimentalTabSynchronization:true})
To show my pictures offline when they were upload when my app got online.
I get my url by stocking it into a collection,
this is an example of my picture object :
{
namePicture : myNamePicture
url : myUrlPicture,
description: myDescription
etc...
}
so i just need to use this to list all my pictures :
ionViewWillEnter() {
let id = this.route.snapshot.paramMap.get('id');
var userUid = this.auth.getUidUser();
var db = firebase.firestore();
db.collection('users').doc(userUid).collection('directory').doc(id).onSnapshot({ includeMetadataChanges: true }, res => {
this.data['title'] = res.data().refConstructionSite;
this.data['description'] = res.data().description;
})
db.collection('users').doc(userUid).collection('directory').doc(id).collection('photos').onSnapshot({ includeMetadataChanges: true }, res => {
var pictures = [];
res.docs.forEach(res => {
pictures.push({
url: res.data().url, title: res.data().title, description: res.data().description,
address: res.data().address, date: res.data().date, latitude: res.data().latitude, longitude: res.data().longitude
})
})
this.data['items'] = pictures;
})
}
My listing working online/offline.
But now my problem is when i take a picture offline, how can i doing something like simulating the upload and show my picture, doing thing on it and synchronise when i get upload?
At the moment this is my upload function :
takePicture() {
try {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
sourceType: this.camera.PictureSourceType.CAMERA,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((result) => {
const image = `data:image/jpeg;base64,${result}`;
const pictures = storage().ref(this.generateUUID());
var waitForPictureToBeUpload = pictures.putString(image, 'data_url');
var d = new Date();
var datestring = ("0" + d.getDate()).slice(-2) + "/" + ("0" + (d.getMonth() + 1)).slice(-2) + "/" +
d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
var address = '';
let options: NativeGeocoderOptions = {
useLocale: true,
maxResults: 5
};
var latitude;
var longitude
this.loader = true;
this.geolocation.getCurrentPosition().then((resp) => {
latitude = resp.coords.latitude;;
longitude = resp.coords.longitude;
this.nativeGeocoder.reverseGeocode(resp.coords.latitude, resp.coords.longitude, options)
.then((result: NativeGeocoderResult[]) => {
address += result[0].subThoroughfare + ' ' + result[0].thoroughfare + ', ' + result[0].postalCode + ' ' + result[0].locality;
waitForPictureToBeUpload.then(res => {
var namePicture = res.metadata.name;
var userUid = firebase.auth().currentUser.uid;
var db = firebase.firestore();
let idFolder = this.route.snapshot.paramMap.get('id');
storage().ref().child(namePicture).getDownloadURL().then(res => {
db.collection('users').doc(userUid).collection('directory').doc(idFolder).collection('photos').add({
namePicture: namePicture,
url: res,
title: '',
description: '',
latitude: latitude,
longitude: longitude,
address: address,
date: datestring
})
this.loader = false;
storage().ref(namePicture).updateMetadata({ 'cacheControl': 'public, max-age=15552000' }).then(e => {
});
})
.catch((error: any) => console.log(error));
});
})
.catch((error: any) => console.log(error));
}).catch((error) => {
console.log('Error getting location', error);
});
})
}
catch (e) {
console.error(e);
}
}
I’m sorry if my code is bad, i’m a new developer 
I hope it’s clear,
Best regards.