<< 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
![](Storage-15_1.png)
![](Storage-16_1.png)
![](Storage-18_1.png)
![](Storage-19_1.png)
![](Storage-20_1.png)
![](Storage-21_1.png)
![](Storage-22_1.png)
![](Storage-23_1.png)
![](Storage-24_1.png)
2. Deploy functions with storage rules.
![](Storage-12_1.png)
![](Storage-13_1.png)
![](Storage-14_1.png)
![](Storage-17_1.png)
![](Storage-25_1.png)
3. Build modal dialog form. Use FormGroup and @Inject Mat-Dialog-data to code.
![](Storage-26_1.png)
![](Storage-27_1.png)
4. Use Html Input type="file" to upload and inject to Change property browser event $event. Processing $event.target on form.
![](Storage-30_1.png)
![](Storage-31_1.png)
![](Storage-32_1.png)
![](Storage-33_1.png)
![](Storage-34_1.png)
5. Determine right filepath on storage with AngularFireStorage.
![](Storage-35_1.png)
![](Storage-36_1.png)
![](Storage-37_1.png)
![](Storage-38_1.png)
![](Storage-39_1.png)
6. Storage upload return Task (this is observable variable). This task has Snapshot changes event. We need subscribe to that task.
![](Storage-40_1.png)
![](Storage-41_1.png)
![](Storage-42_1.png)
![](Storage-43_1.png)
![](Storage-44_1.png)
![](Storage-29_1.png)
7. Also upload task has percentage events (observable).
![](Storage-45_1.png)
8. Use progress bar with parameters [value]=, create local variable on *ngif for that parameter.
![](Storage-46_1.png)
![](Storage-47_1.png)
![](Storage-48_1.png)
![](Storage-49_1.png)
![](Storage-50_1.png)
![](Storage-51_1.png)
![](Storage-52_1.png)
![](Storage-53_1.png)
![](Storage-54_1.png)
![](Storage-55_1.png)
9. Use Pipe(last) with observable event.
![](Storage-56_1.png)
![](Storage-57_1.png)
10. Receive link to DownloadURL.
![](Storage-58_1.png)
![](Storage-59_1.png)
11. Use Pipe(last), ConcatMap with DownloadURL.
![](Storage-60_1.png)
![](Storage-61_1.png)
![](Storage-5_1.png)
![](Storage-6_1.png)
![](Storage-7_1.png)
![](Storage-62_1.png)
![](Storage-63_1.png)
12. Show Image based on Observable variable DownloadUrl.
![](Storage-64_1.png)
![](Storage-65_1.png)
![](Storage-66_1.png)
![](Storage-67_1.png)
![](Storage-68_1.png)
![](Storage-1_1.png)
![](Storage-2_1.png)
![](Storage-3_1.png)
![](Storage-4_1.png)
![](Storage-8_1.png)
![](Storage-9_1.png)
![](Storage-10_1.png)
13. Deploy function and set right to Firebase Storage for uploading.
![](Storage-69_1.png)
![](Storage-70_1.png)
![](Storage-11_1.png)
![](Storage-71_1.png)
![](Storage-72_1.png)
14. Generate Thumbnail using ImageMagic module. Use rimraf modile to delete big image from storage bucket. Set right to delete.
![](Storage-73_1.png)
![](Storage-74_1.png)
![](Storage-75_1.png)
![](Storage-76_1.png)
![](Storage-77_1.png)
![](Storage-78_1.png)
![](Storage-79_1.png)
![](Storage-80_1.png)
![](Storage-81_1.png)
![](Storage-82_1.png)
![](Storage-83_1.png)
![](Storage-84_1.png)
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (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
![](http://forum.vb-net.com/GetTopicCount.png?id=3be4bee4-4c07-41f6-892c-a118b3cb3027)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |