File uploads come to AngularFire

Cloud Storage for Firebase is a serverless way to upload and download binary files straight from the browser. As of today, it’s officially supported by AngularFire. Adding AngularFire to your app allows you to easily and securely manage a Cloud Storage bucket. All without a line of server code.

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

AngularFire, meet Cloud Storage

If you’re not familiar with AngularFire, it’s the official Angular library for Firebase. AngularFire combines the power of Angular, Firebase, and RxJS to act as your serverless backend. It includes modules for the Realtime Database, Firebase Authentication, Cloud Firestore, and today it supports Cloud Storage.

Adding AngularFire to your project is easy. Install Firebase and AngularFire from npm:

npm i firebase angularfire2

Then add it to your NgModule:

@NgModule({
 declarations: [ AppComponent ],
 imports: [
   BrowserModule,
   AngularFireModule.initializeApp({
     apiKey: "",
     authDomain: "",
     storageBucket: ".appspot.com",
     projectId: "",
   }),
   AngularFireStorageModule
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Inject the AngularFireStorage module into your component.

import { Component } from '@angular/core';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
 selector: 'app-root',
 template: `
  <label for="file">File:</label>
  <input accept=".png,.jpg" type="file" />
 `
})
export class AppComponent {
  constructor(private afStorage: AngularFireStorage) { }
  upload(event) {
    this.afStorage.upload('/upload/to/this-path', event.target.files[0]);  
  }
}

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

The foundation of a file upload

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

<label for="file">File:</label>
<input accept=".png,.jpg" type="file" />

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, we’ll cover server restrictions later). Event bindings in Angular make it easy to handle a (change) event and send the file to Cloud Storage.

upload(event) {
  // create a random id
  const randomId = Math.random().toString(36).substring(2);
  // create a reference to the storage bucket location
  this.ref = this.afStorage.ref(randomId);
  // the put method creates an AngularFireUploadTask
  // and kicks off the upload
  this.task = this.ref.put(event.target.files[0]);
}

The sample above creates an AngularFireStorageReference with a randomly generated Id. This reference controls a path in your Cloud Storage bucket. Creating a reference doesn’t initiate an upload, but it allows to start one as well as delete the file saved at that location. Calling .put() on a reference with a Blob beings the upload to Cloud Storage.

You may have noticed that creating a reference and calling .put() is the longer way of calling afStorage.upload(path, blog) 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’ll monitor the upload progress.

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.