How to use image upload with reactive forms in Angular 7 with Firebase

Question

Currently I'm creating a simple CRUD Angular app with Firebase on the backend. It's a simple table with list of students and when it's time to create new student, there appears a popup with name, group, mark and avatar inputs. I use reactive form to handle inputs values. But I can't send to the firebase 64-base string of huge size avatars, because firebase has limit for retrieving string length. I want to upload avatars with huge size, and how should I do it? Thanks. Excuse me for my poor English.

Answer 1

You are right firebase does limit the string length! They also limit the size of the document size of database objects. The good thing is that firebase provides a service called cloud storage have a look at the documentation https://firebase.google.com/docs/storage/ . I would recommend that you upload the image to cloud storage using a storage path based on the studentId for example images/students/<studentId> . This way if you need to delete a user, before deleting the user you can go to cloud storage and delete the avatar image linked with student. Also it's a good idea if you want to upload a new image to replace the old image you can do so easily. Also a good path storage side system like this makes it a lot easier for you to get the downlaodURL on the client side based on the studentID.