How to Track Image Upload Percentage in Angularfire2 Image Upload

File uploads come up to AngularFire

Cloud Storage for Firebase is a serverless style to upload and download binary files straight from the browser. As of today, it'southward officially supported by AngularFire. Adding AngularFire to your app allows you to easily and deeply manage a Cloud Storage saucepan. All without a line of server lawmaking.

Get ready, uploading files from your Angular app only got a lot easier.

AngularFire, meet Cloud Storage

If yous're non familiar with AngularFire, it'south the official Angular library for Firebase. AngularFire combines the power of Athwart, Firebase, and RxJS to act every bit your serverless backend. It includes modules for the Realtime Database, Firebase Hallmark, Cloud Firestore, and today it supports Cloud Storage.

Adding AngularFire to your project is piece of cake. Install Firebase and AngularFire from npm:

          npm i firebase angularfire2        

Then add it to your NgModule:

Inject the AngularFireStorage module into your component.

Now you're ready to manage your files from Deject Storage without a server of your own.

The foundation of a file upload

The chief style of uploading files on the web is through the <input type="file"> tag.

          <label for="file">File:</label>
<input type="file" (change)="upload($outcome)" have=".png,.jpg" />        

This tag fires a (change) event when the user selects a file. It even allows you to restrict the user from uploading undesired formats with the accept attribute (beware that this is only a client restriction, nosotros'll encompass server restrictions later). Upshot bindings in Angular make it easy to handle a (alter) event and ship the file to Cloud Storage.

The sample above creates an AngularFireStorageReference with a randomly generated Id. This reference controls a path in your Cloud Storage saucepan. Creating a reference doesn't initiate an upload, merely it allows to start i likewise as delete the file saved at that location. Calling .put() on a reference with a Hulk beings the upload to Cloud Storage.

You may take noticed that creating a reference and calling .put() is the longer mode of calling afStorage.upload(path, weblog) shown above. Under the hood the afStorage.upload() method creates a reference, calls .put(), and returns the AngularFireUploadTask for you.

The AngularFireUploadTask is how you lot'll monitor the upload progress.

Reactive upload methods

The spider web platform provides an easy and attainable way of displaying the progress of any given task. This is washed through the aptly named <progress> element.

          <progress max="100" [value]="(uploadProgress | async)"></progress>        

The progress chemical element's value attribute is easy to command with Angular'due south property binding. AngularFire provides an upload observable that y'all tin can pipage in the new value as it changes.

The .snapshotChanges() method on an AngularFireUploadTask returns an object with helpful metadata most the upload. Properties such as the totalBytesTransferred, totalBytes in the upload, any metadata provided, the state of the upload, and the downloadURL of the file in one case uploaded. Using this metadata y'all can update the UI to show the progress.

Near of the time your UI will brandish the upload percent and download url. Since this a mutual task, we made this a scrap easier with two helpful methods: .percentageChanges() and .downloadURL().

Instead of calculating the changes yourself, the .percentageChanges() observable does the piece of work for you lot. The .downloadURL() observable emits the download URL string in one case the upload is completed. This simplifies binding this information to your UI.

The best part of these appreciable methods is that you don't need to worry about complex mapping or multiple .subscribe() calls in your component code. Just bind them to the async pipe and your users are watching their file upload progress.

Just what if your user changes their mind? What if they want to suspension their upload because they're no longer on a WiFi network? Volition they be able to resume when they want? What if they desire to cancel the upload all together?

Controlling uploads

A user should be able to pause, resume, or cancel an upload in progress. If or when their upload completes they should be able to delete information technology besides.

An AngularFireUploadTask contains the following appropriately named methods: .pause(), .resume() , and .cancel() . In the sample higher up, the component stores the chore every bit an case property. This allows you to call information technology from your template:

Ideally yous'll want to update your UI so the user knows the state of their upload. The .snapshotChanges() observable emits this information through the state property.

When the user taps "Interruption", the 'paused' state emits from the appreciable. When the user taps "Resume", the 'running' state emits. And of class, when the "Interruption" button is tapped, the 'paused' country emits.

The template higher up will disable each push button depending on the state. A user tin cancel a 'running' upload, but they tin't click "Resume" unless the country is 'paused' .

Bounden the UI to the upload state simplifies your templates because you don't accept to manage stateful properties on your component like: isPaused, isUploading, and isFinished. The state emits from the observable and y'all bind the expression in your template.

Simple downloads

Downloading files from Deject Storage is real simple with AngularFireStorage. The .getDownloadURL() method on an AngularFireStorageReference returns an observable of a download URL.

Combining the .getDownloadURL() method with the *ngIf directive and async pipage allows you lot to brandish the image once it's downloaded.

Just because uploading and downloading files is easy, information technology doesn't mean we tin't secure them from unauthorized admission.

Secure your files

Cloud Storage for Firebase comes with a server security dominion set. These security rules ensures the proper file formats are uploaded and only the right users accept access to the correct files.

The <input type="file" admission=".png,.jpg"> tag restricts file uploads to .png and .jpg. However, this a client merely restriction. It has nothing to do with what Cloud Storage will take. To secure your storage bucket y'all demand to write rules that just let images to be uploaded at the /images path.

The rules above will allow anyone read from the /images path, but but upload a file if information technology has an 'epitome/.*' content type (.png, .jpg, .jpeg, etc…) and is less than 5MB.

Get started and even contribute!

Get started by checking out our Github repo and the official documentation. AngularFire and the Cloud Storage SDK are each open source projects. If you lot want to become involved in the project make certain to check out our open issue or file one yourself!

mccaffreysyclee1962.blogspot.com

Source: https://blog.angular.io/file-uploads-come-to-angularfire-6842352b3b47

Share this post