Angular 5

File Uploads and Download using AngularFire in Angular 4 and 5

Let’s start discussion about uploading and downloading binary files from your Angular 4 and 5 apps without a line of server code.

Firstly Install Firebase and AngularFire from NPM in your apps and it allow us to easily and securely manage a Cloud Storage bucket.

The Firebase is a server-less ways to upload and download binary files straight from the browsers-
npm i firebase angularfire2


Add Firebase and AngularFire in your NgModule –
//Import AngularFire in angular 5+ apps
import { AngularFireModule } from 'angularfire2/angularfire2';
import { AngularFireStorage, AngularFireStorageModule } from 'angularfire2/storage';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp({
        apiKey: "<your-api-key>",
        authDomain: "<your-auth-domain>",
        storageBucket: "<project-id>.appspot.com",
        projectId: "<your-project-id>",
    }),
    AngularFireStorageModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent, pathMatch: 'full', canActivate: [AuthGuard]},
      { path: 'user', component: UserComponent, canActivate: [AuthGuard]},
      { path: 'login', component: LoginComponent}])
  ],
  providers: [ ErrorLoggService, // register global error log service
              GlobalErrorHandler,// register global error handler
              EmployeeService, // register Employee service
              ValidationService, //register Validation Service
              AuthenticationService, //register Authentication Service
              UserService],//register User Service
  bootstrap: [AppComponent]
})
export class AppModule { }


In the last, inject the AngularFireStorage module into your app component –
import { Component } from '@angular/core';
import {HttpClientModule} from "@angular/common/http";
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  //initialize constructor
   constructor(private ngFireStorage: AngularFireStorage) { }

   //Upload method for upload files from Cloud Storage
   upload(event) {
     this.ngFireStorage.upload('/User/uploadFile/img', event.target.files[0]); 
   }
 }

And HTML and CSS components -
<!-- File uploads using AngularFire-->
<h3>File uploads using AngularFire</h3>
<label for="file" custom-file-upload>Select File -</label>
<input type="file" (change)="upload($event)" accept=".png,.jpg,.jpeg,.gif"  class="inputfile"/>


The file uploads control -
<input type="file">


Restricts file uploads - Secure your storage bucket you need to write rules that only allow images to be uploaded at the /images path.

The Result looks like –
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^