Exploring the power of image uploads with reactive forms in Angular 7 integrated with Firebase

At the moment, I am developing a basic CRUD Angular application with Firebase as the backend. The app consists of a simple table displaying a list of students. When it comes to adding a new student, a popup appears with fields for name, group, mark, and avatar. I am using a reactive form to manage input values. However, I am facing an issue when trying to upload avatars with large file sizes as Firebase has limits on the length of strings that can be stored. Does anyone have suggestions on how I can successfully upload avatars with large file sizes in Firebase? Any help would be greatly appreciated. Please excuse any language errors in my message.

angulartypescriptfirebase

Answer №1

It seems that Firebase does have limitations on string length and document size in the database. However, they offer a solution called cloud storage. Take a look at the documentation here: https://firebase.google.com/docs/storage/. I suggest uploading images to cloud storage with a storage path based on the studentId, for example: 

images/students/<studentId>
. This way, if a user needs to be deleted, you can easily remove the avatar image associated with that student from cloud storage. Additionally, replacing an old image with a new one becomes a seamless process. Having a structured storage path system like this also simplifies obtaining the download URL on the client side, based on the studentID.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sorting through the properties of the Record<K, T>:

Let's say we have the following data stored in a record: export const MenuData: Record<Header, HeaderInfo> = { val1: { message: 'xyz', buttonText: 'txt', buttonUrl: '/url-abc', }, val2: { messa ...

typescripttypescript-utility

Gain access to TypeScript headers by typing the request (req) object

Is there a way to access headers in a method that is typed with Express.Request? Here's an example code snippet: private _onTokenReceived(req: Express.Request, res: Express.Response): void { const header: string = req.headers.authorizatio ...

typescriptexpress

What is the best way to store types in a TypeScript-based React/Next application?

I'm currently in the process of setting up a Next.js page in the following manner const Index: NextPage<PageProps> = (props) => { // additional code... Prior to this, I had defined my PageProps as follows: type PageProps = { pictures: pi ...

javascriptreactjstypescriptnext.js

Is AGM-Map capable of providing all the same features as the Google Maps API?

Greetings to everyone! I am currently working on an Angular 6 project and I want to incorporate asset tracking using the Google Maps API. However, I am unsure if AGM-Map fully supports all the features of Google Maps API, like heatmaps and advanced asset ...

javascriptangulargoogle-maps

Is there a way in NodeJS to preview the contents of a file in a browser before initiating the download process?

Is there a way to preview a file in the browser before downloading it in NodeJS? This would allow users to make sure they are choosing the correct file to download. Currently, I have this code for downloading a file: app.get("/download/file", (req, res) = ...

node.jsangularexpress

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

I'm contemplating the idea of transitioning my existing JavaScript codebase to incorporate TypeScript in NodeJS. One aspect that I am concerned about is being able to view the stack trace in AWS CloudWatch (request log) in case an error occurs during ...

javascriptnode.jsamazon-web-serviceslambdatypescript

Ways to transfer information from a parent component to a child component in Angular 5 without the need for *ngFor

Currently, I am utilizing *ngFor to iterate through a selector and passing data to the child component. Let's take a look at the code snippet below: <app-piegraph *ngFor="let studentData of studentData" [studentData]="studentData"></app-pieg ...

angularangular-components

Creating a function that takes a second parameter inferred from a mapped type, depending on the first parameter given

Here is a snippet of code similar to the example provided: export enum Group { FOO = 'foo', BAR = 'bar', BIZ = 'biz' } interface Mapping extends Record<Group, any> { [Group.FOO]: {fooString: string; fooN ...

typescripttypescript-generics

Encountering a problem when attempting to add ngrx to an Angular project

I'm currently in the process of setting up ngrx in my Angular application. After running the command ng add @ngrx/store@latest An error occurred with the following details: npm resolution error report 2022-07-07T20:36:16.089Z While resolving: [em ...

angularngrxngrx-store

Employing Multer and Express in conjunction with TypeScript

Overview Currently, I am working on a project that involves creating a user-friendly website where individuals can easily upload images. For this particular task, I have employed Node.js, React, Multer, and Typescript. Issue at Hand app.post('/admi ...

node.jstypescriptexpressmulter

The concept of nesting partial types in Typescript

Struggling to type partial objects from GraphQL queries, especially with an object that looks like this... // TypeScript types interface Foo { bar: Bar } interface Bar { a: number, b: number } // GraphQL query foo { bar { a // 'b&a ...

typescripttypesgraphql

Excluding Layout from Display on Certain Pages in a Next.js 13 App Router

I am currently working on a personal project that involves using the Next.js 13 app router, and I have encountered a dilemma. Within my project, there is a header component injected into the layout.tsx file located in the root directory. However, I also ha ...

typescriptnext.jsnext.js13app-router

Tag of Component placed after <router-outlet>

partial1.html <div class="content">test test</div> main.html <div class="main"> <router-outlet></router-outlet> </div> Suppose we need to route from main.html to partial1.html. During runtime, the resulting HTML w ...

angularangular-routing

Facing unexpected behavior with rxjs merge in angular5

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/merge'; this.data = this.itemsCollection.valueChanges() this.foo = this.afs.collection<Item>('products') .doc('G2loKLqNQJUQIsDmzSNahlopOyk ...

javascriptangulartypescriptmergerxjs

Angular Select displays a MatIcon along with the selected value

My code looks like this: <mat-select > <mat-option *ngFor="let option of options" [value]="option.id" [disabled]="option.disabled" [matTooltip]="option.tooltip" > & ...

angularangular-material

An informative step-by-step approach to constructing Angular applications utilizing npm and TypeScript

When I first encountered Angular2, I was introduced to TypeScript, npm, and more for the very first time. I was amazed by their power, but I know I've only scratched the surface. While I can navigate through the "development mode," my ultimate goal i ...

buildtypescriptnpmangular

Error: Trying to access a property that is not declared on an empty object

Using a fully patched Visual Studio 2013, I am integrating JQuery, JQueryUI, JSRender, and TypeScript into my project. However, I am encountering an error in the ts file: Property 'fadeDiv' does not exist on type '{}'. While I believ ...

typescript

How can we ensure file uploads are validated when using class-validator?

Recently, I've been utilizing the wonderful class-validator package to validate data. One specific validation task I'm working on is validating a file upload, ensuring that the file is not empty and ideally confirming that it is an image file. H ...

node.jstypescriptvalidationclass-validator

An error is thrown when attempting to use npm install, stating "integrity checksum failed. The expected sha1 checksum was sha1-6G...=, but the actual checksum was sha512

I have been browsing through various posts on different platforms trying to solve my issue, but unfortunately, I haven't had any luck. Despite having no prior experience with Angular, I was tasked with installing npm and running an unfamiliar Angular ...

angularnpminstallationvisual-studio-code

Issue with auto formatting quotes in IntelliJ / WebStorm is no longer functioning as expected

Currently, my TSLint configuration is set to permit the use of single quotes (') instead of double ones ("). Previously, I was able to conveniently switch all instances of " to ' in a file by using the Reformat Code shortcut CTRL + ALT ...

typescriptintellij-ideawebstormjetbrains-ide