Angular Image Upload with MIME Type Validation

In this video we implement file/image upload in our Ionic/Angular LinkedIn clone application. We check the MIME and extension type and verify with the file-type package that the file type matches the specified extension by inspection of its magic number. We also use RxJS to ensure the changes are propagated and that the state is managed appropriately.

--------------------------------------------------
Recommended Udemy courses
--------------------------------------------------

[imigi]

0. I do not use Ionic, just clear Angular

1. If someone had issue with 'OperatorFunction<Buffer, { modifiedFileName: string; }>' is not assignable to parameter of type 'OperatorFunction<ArrayBuffer .... ' it s beacause right now 'file.arrayBuffer' returns ArrayBuffer and also another error in the that occurs is the fileTypeResult, it could return undefined, so you also need to declare correct type for it 'fileTypeResult: FiletTypeResult | undefined' before you start to working with that.
Movie time: 58:13, file: profile-summary.component.ts

2. Also after trying to upload image i got error: 'Uncaught ReferenceError: Buffer is not defined', the solution for me was to simply install buffer

Thanku Jon for this material, it's really hard to find material that are based on Angular, so I am really appreciate it

[serhiikolontaievskyi]

Hi! Appreciate your work!
That "weird" issue with *ngIf was because of the PopoverComponent was not declared in HomeModule declarations.
Since components need CommonModule to work with *ngIf properly, you can add PopoverComponent to declarations section of HomeModule.

[colinfish]

I'm able to get the image to propagate with only a class level string (userFullImagePath: string;) and a subscribe statement I removed the Subscription (ImagePathSubscription: Subscription;) and its declarations in ngOnInit and ngOnDestroy. Do you see any issues with this approach? Cheers!