1

I am building an image blog app in Ionic 4. My use case is allowing the user to upload multiple image files to the same blog post. The code I already have allows me to upload one image to a collection at a time. Currently, when the user uploads the image, the image is stored in firebase storage and then the image is referenced in the user's firestore document.

The typescript file for choosing image 

 openImagePicker(){
    this.imagePicker.hasReadPermission()
    .then((result) => {
      if(result == false){
        // no callbacks required as this opens a popup which returns async
        this.imagePicker.requestReadPermission();
      }
      else if(result == true){
        this.imagePicker.getPictures({
          maximumImagesCount: 10
        }).then(
          (results) => {
            for (var i = 0; i < results.length; i++) {
              this.uploadImageToFirebase(results[i]);
            }
          }, (err) => console.log(err)
        );
      }
    }, (err) => {
      console.log(err);
    });
  }

The Service File 

createTask(value){
    return new Promise<any>((resolve, reject) => {
      let currentUser = firebase.auth().currentUser;
      this.afs.collection('tasks')
      .add({
        category: value.category,
        title: value.title,
        description: value.description,
        image: value.image,
        uid: currentUser.uid
      })
      .then(
        res => resolve(res),
        err => reject(err)
      )
    })

 uploadImage(imageURI, randomId){
    return new Promise<any>((resolve, reject) => {
      let storageRef = firebase.storage().ref();
      let imageRef = storageRef.child('image').child(randomId);
      this.encodeImageUri(imageURI, function(image64){
        imageRef.putString(image64, 'data_url')
        .then(snapshot => {
          snapshot.ref.getDownloadURL()
          .then(res => resolve(res))
        }, err => {
          reject(err);
        })
      })
    })
  }

I am trying to figure out which is the best way to store the multiple image files to firestore, so I can easily retrieve the images. I was thinking that it would be possible to store the images as a map or array in the firestore document like this However, is this a good structure for retrieving the images?

tasks -> tasksID -> 

{ 
category:
"Art"
description:
"This is a description"
image: 
0
"https://firebasestorage.googleapis.com/v0/b/wippy-1962c.appspot.com/o/image%2F6cu63? 
alt=media&token=2eab2208-9399-4cf7-89d8-f709d93c4ufn"
1
"https://firebasestorage.googleapis.com/v0/b/wippy-1962c.appspot.com/o/image%2Fshook.png? 
alt=media&token=ebed3a28-b2ed-423a-a19d-f5849134045e"
2
"https://firebasestorage.googleapis.com/v0/b/wippy-1962c.appspot.com/o/image%2Fpatrick.png? 
alt=media&token=33062fb2-a3dc-4077-9390-cbeb60a654a0"
}
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807

1 Answers1

0

However, is this a good structure for retrieving the images?

Credits to this answer for the information below:

" You need to know that there is no "perfect", "the best" or "the correct" solution for structuring a Cloud Firestore database. The best and correct solution, is the solution that fits your needs and makes your job easier. Bear also in mind that there is also no single "correct data structure" in the world of NoSQL databases. All data is modeled to allow the use-cases that your app requires. This means that what works for one app, may be insufficient for another app. So there is not one correct solution for everyone. An effective structure for a NoSQL type database is entirely dependent on how you intend to query it."

Based on the above I would recommend choosing Root-level collections as structure.

Doing a little research, I found out some interesting services such as Firebase Cloud Storage.

More information about using Firebase Cloud Storage with Angular can be found here.

In case you are interested this guy also has some interesting tutorials and articles regarding Ionic using Angular

Let me know if this is helpful.

tzovourn
  • 1,293
  • 8
  • 18