The purpose of this demo code is to practice and learn how to get / upload / download / delete blob files to Azure Storage Blobs with Angular.
The project is build with:
- Angular V14.2.0
- Bootstrap V5.2.2
- ngrx V14.3.2
- @azure/storage-blob V12.12.0
The user:
- Select one file (image) from the file system
- Upload the file to Azure Storage Blobs. If the file is large, uploading the big file in chunks and show one progress bar to indicate the uploading progress.
- Delete the file from Azure Storage Blobs
- Download file from Azure Storage Blobs. If the file is large, show one process bar to indicate the downloading process.
Here is the demo for upload blob file:
Here is the demo for delete blob file:
Here is the demo for download blob file:
- Node V16.15.0
- Angular V14.2.0
- Azure Storage Account, 【refer from here】
- Azure Blob container, 【refer from here】
npm install
npm startOne more thing you need to do is to include your won Azure account information in the environment.ts file.
Otherwise you will see: Azure Storage is not configured UI
Once the project runs up, you can visit the page from http://localhost:4321/
Try to uplod a big file, you will see Azure uploading the big file in chunks and we can use onProgress callback to show a progress bar to indicate the uploading progress.
In this demo, upload one zip file, the zip file has been uploaded in 3 chunks:
For more Azure Storage blob usage, you can refer Upload a blob to Azure Storage by using the JavaScript client library