Ionic 4 - firebase storage take picture offline

@dmoreaux64 wrote:

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.

Posts: 1

Participants: 1

Read full topic