CODEWITHSUNDEEP
angulartypescriptfirebasegoogle-cloud-firestore
Tom
Tom

Reputation: 4033

Store Firestore data inside of mock

Currently I'm distributing data inside of my app using a mock containing an array (you can find the code below). I iterate through this array in each component that need it.

export const CASES: Case[] = [
  { id: 0,
    name: 'Diesel',
    portfolioImage: '/assets/images/portfolio/diesel.png',
    image: '/assets/images/diesel.jpg',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/diesel',
    header: 'black'
  },

  { id: 1,
    name: 'WeWork Berlin',
    portfolioImage: '/assets/images/portfolio/berlin.png',
    image: '/assets/images/berlin.jpg',
    image2: '/assets/images/wework/berlin-logo.png',
    image3: '/assets/images/wework/berlin-building.png',
    link: '/cases/wework',
    header: 'white'
  },

  { id: 2,
    name: 'Fritzhansen',
    portfolioImage: '/assets/images/portfolio/fritzhansen.png',
    image: '/assets/images/fritzhansen.jpg',
    image2: '/assets/images/fritzhansen/women.png',
    image3: '/assets/images/fritzhansen/chairs.jpeg',
    link: '/cases/fritzhansen',
    header: 'white'
  },

  { id: 3,
    name: 'Savum',
    portfolioImage: '/assets/images/portfolio/savum.png',
    image: '/assets/images/savum/savum-front.png',
    image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png',
    link: '/cases/savum',
    header: 'black'
  },

  { id: 4,
    name: 'Eskay',
    portfolioImage: '/assets/images/portfolio/eskay.png',
    image: '/assets/images/eskay.jpg',
    image2: '/assets/images/eskay/front.jpg',
    image3: '/assets/images/eskay/inner.jpg',
    link: '/cases/eskay',
    header: 'black'
  },

  { id: 5,
    name: 'Diesel Fashion',
    portfolioImage: '/assets/images/portfolio/diesel-snd.png',
    image: '/assets/images/diesel-snd.png',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/template',
    header: 'black'
  },

  { id: 6,
    name: 'Mobilia',
    portfolioImage: '/assets/images/portfolio/mobilia.png',
    image: '/assets/images/mobilia.jpg',
    image2: '/assets/images/mobilia/green.jpg',
    image3: '/assets/images/mobilia/pink.jpg',
    link: '/cases/mobilia',
    header: 'black'
  },

  { id: 7,
    name: 'Rarekind',
    portfolioImage: '/assets/images/portfolio/rarekind.png',
    image: '/assets/images/rarekind.jpg',
    image2: '/assets/images/rarekind/tube.png',
    image3: '/assets/images/rarekind/red.png',
    link: '/cases/rarekind',
    header: 'black'
  },
];

What I want is to store this array with Firebase (instead of image links, firebase storage?) to be able to use it as a kind of content management system to update the entries.

Is there a way to insert this list into Firestore in combination with Firebase's storage instead of the assets folder to store images?

How can I read this data on init and store it inside of this kind of mock to distribute it automatically again? - Is it even possible to store images in such an array?

To be exact, how can I..

  1. Fetch the images from storage together with their allocated entry
  2. Insert this bundle as a single Case into the given mock

Can I realize such approach or is there another approach which serves the same purpose?

Upvotes: 0

Views: 55

Answers (1)

btzmacin
btzmacin

Reputation: 67

Is there a way to insert this list into Firestore in combination with Firebase's storage instead of the assets folder to store images?

Yes, but it may not work 100% the way you're imagining it. When you upload an image to Firebase Storage, it gives you a URL to retrieve that image. You can then save that URL in Firebase Realtime DB using a JSON object much like the one from your question. Your app will need to query Firebase to retrieve the JSON and then make subsequent requests for the specific images.

Storing the images as base64 data-URIs is something you might want to explore if the assets are small, but performance is a serious concern there so YMMV.

Upvotes: 1

Related Questions