(RESOLVED) What's better format to save image in Firestore?

Ionic Framework ionic-v3
1

What’s type to save imagem in Firestore, base64 or another … ?

2

Why not save image to firebase storage And save The download url to firestore?

3

I’ve trying to get url image, but not success, can you help me?

  upload(user: User) {
    return new Promise((resolve, reject) => {
      const fileRef = this.storage.ref('users/' + user.id + ".jpg");
      const uploadTask = fileRef.putString(user.avatar).then(function(snapshot) {
        resolve(snapshot)
      }, err => {
        reject(err)
      });
      uploadTask.then(() => {
               ......
         })
    })    
  }
4

Dont use function. Only fat arrow

Not sure if that solves it

5

This is my working code

	uploadBase64(folder: string, name: string, base64: string) {
		const path = `${folder}/${Date.now()}_${name}`; // full path file
		const ref = this.storage.ref(path);

		const task = ref.putString(base64, 'data_url'); // upload task
		return this.getDownloadUrl(task, ref);
	}

	private getDownloadUrl(uploadTask: AngularFireUploadTask, ref: AngularFireStorageReference): Observable<string> {
		return from(uploadTask).pipe(switchMap(() => ref.getDownloadURL()));
	}

So you can call this function to other function

	async upload() {
		const url = await this.uploadBase64('thumb', 'image.jpg', 'data:image/jpeg;base64,...').toPromise();
		console.log(url);
	}

And of course you can access with normal observable

	upload() {
		this.uploadBase64('thumb', 'image.jpg', 'data:image/jpeg;base64,...').subscribe(url => {
			console.log(url);
		});
	}
1 Like
6

Very very good, thanks my friend, its work perfect, contratulations!

7

The code marked as the solution here should only be used for small images, because base64 costs an extra 33% of bandwidth for no good reason. A better way to do this in general, and especially for large images, is to use FormData and a Blob.

8

all right, in my case, I had to use a small image to put in the user’s avatar, thanks for watching

9

If you want upload file instead of base64, change const task to

const task = ref.put(file);

or you can see other upload method at: https://firebase.google.com/docs/storage/web/upload-files

1 Like
10

thanks for your help friend!

1 Like