python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions