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
--------------------------------------------------
NestJS - Zero to Hero: tinyurl.com/3rxsz669
Angular - The Complete Guide: tinyurl.com/4h5rmpsj
Understanding TypeScript: tinyurl.com/9wz6fp7k
React - The Complete Guide: tinyurl.com/2t6v5yeu
Docker Mastery (with Kubernetes + Swarm): tinyurl.com/yeymdnhn
Playlist: • LinkedIn Clone - Ionic...
GitHub: github.com/Jon-Peppinck/linke...

[@imigi427]

0. I do not use Ionic, just clear Angular
1. If someone had issue with 'OperatorFunction' is not assignable to parameter of type 'OperatorFunction

[@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.

[@JonPeppinck]

Thanks Sergey. I didn't realise this at the time. Typically have been using the Angular CLI which usually adds the new component to the module for us. I did eventually figure this out (in the next couple of videos). I do really appreciate when developers help out - makes everyone a better developer. Cheers!

[@colinfish3868]

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

[@colinfish3868]

Ah, okay. So logout and log-in as another user has unexpected behavior if the Subscription is removed.
And are you using BehaviorSubject for fullName because you don't expect it to change like userFullImagePath? Or are you showing two different approaches to accomplish the same goal?

[@JonPeppinck]

@@colinfish3868 Hi Colin, there are many ways to achieve the same goal using RxJS. There are three patterns which get used more often and wanted to share these techniques in this series. The first is the regular observable in which you can subscribe to to get a value, very much like a promise. Although the key difference is that Subscriptions can receive streams of data. This second approach of using multiple subscriptions to the same data stream means we have consistent data in all spots. The next main approach is using subjects. Observables are more passive, in that we need to subscribe to them to work, where as subjects can be fired actively. The difference between a subject and a behavior subject is that a behavior subject we can emit a value immediately. In both we can actively call next such that the changes to the value will be available everywhere. I've found RxJS to be by far the hardest part about Angular, the RxJS docs shows examples of the usage, and may be helpful to get a deeper understanding. Although the techniques used in this series has been what I've used to build enterprise applications. No state management library needed.

[@colinfish3868]

@@JonPeppinck Thanks for the detailed response. I'm loving this series!