<< Back << Firebase storage - upload image.

046 What is Firebase Storage Learn its Key Features
047 File Upload with AngularFire - Step by Step Implementation
048 Implementing a File Upload Percentage Indicator with Angular Material
049 Get a Firebase Storage Revocable Download Url
050 Firebase Storage Security Rules - File Upload Conclusion

• 1. Firebase Storage is ordinary file systems with URL on Googleapis.com
• 2. Deploy functions with storage rules.
• 3. Build modal dialog form. Use FormGroup and @Inject Mat-Dialog-data to code.
• 4. Use Html Input type="file" to upload and inject to Change property browser event $event. Processing $event.target on form.
• 5. Determine right filepath on storage with AngularFireStorage.
• 6. Storage upload return Task (this is observable variable). This task has Snapshot changes event. We need subscribe to that task.
• 7. Also upload task has percentage events (observable).
• 8. Use progress bar with parameters [value]=, create local variable on *ngif for that parameter.
• 9. Use Pipe(last) with observable event.
• 10. Receive link to DownloadURL.
• 11. Use Pipe(last), ConcatMap with DownloadURL.
• 12. Show Image based on Observable variable DownloadUrl.
• 13. Deploy function and set right to Firebase Storage for uploading.
• 14. Generate Thumbnail using ImageMagic module. Use rimraf modile to delete big image from storage bucket. Set right to delete.

1. Firebase Storage is ordinary file systems with URL on Googleapis.com

2. Deploy functions with storage rules.

3. Build modal dialog form. Use FormGroup and @Inject Mat-Dialog-data to code.

4. Use Html Input type="file" to upload and inject to Change property browser event $event. Processing $event.target on form.

5. Determine right filepath on storage with AngularFireStorage.

6. Storage upload return Task (this is observable variable). This task has Snapshot changes event. We need subscribe to that task.

7. Also upload task has percentage events (observable).

8. Use progress bar with parameters [value]=, create local variable on *ngif for that parameter.

9. Use Pipe(last) with observable event.

10. Receive link to DownloadURL.

11. Use Pipe(last), ConcatMap with DownloadURL.

12. Show Image based on Observable variable DownloadUrl.

13. Deploy function and set right to Firebase Storage for uploading.

14. Generate Thumbnail using ImageMagic module. Use rimraf modile to delete big image from storage bucket. Set right to delete.

---

• (2023) CloudflareWorker and Supabase
• (2022) NativeScript, AndroidBooks
• (2022) JS, Css
• (2022) Typescript, Webpack
• (2022) Angular, RxJs, Firebase, MongoDb
• (2022) Node, NestJs, Electron, Pwa, Telegram
• (2022) React, Redux, GraphQL, NextJs
• (2022) Angular/Typescript, JS books

<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>