Firebase使用Angular2通过Firebase数据库（Firebase存储）上传文件和图像

Question

I am looking for an example for image file upload over Firebase database using Angular2.

Please provide code sample or any link..

Answer 1

I'm not aware of any Angular2 libraries that can do Firebase Storage. The AngularFire2 library has a issue open on added the feature.

Answer 2

Follow the instructions from the following link and you can upload file from angular 2 to firebase storage.

https://github.com/Ohtsu/o2-upload-to-fbs

Here are the following necessary steps you can do.

Step:1 => Install npm package

$ npm install o2-upload-to-fbs --save

Step:2 => Login to your firebase account and create a bucket in the storage section

Step:3 => Now in your app.module.ts file, add the following code

import { AngularFireModule } from 'angularfire2';       
import { O2UploadToFbsComponent } from 'o2-upload-to-fbs';  

export const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxxxxxxxx.firebaseio.com",
  storageBucket: "xxxxxxxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxxxxxxxx"

};

@NgModule({
 declarations: [
 O2UploadToFbsComponent,  // <= Add
 AppComponent
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  AngularFireModule.initializeApp(firebaseConfig)  // <= Add

],
  providers: [],
  bootstrap: [AppComponent]
})

and from your firebase account click overview link and then click firebase for web app you will get code just copy and paste the code and paste in firebaseConfig object above

Step 4: => Add the following to your component html

<o2-upload-to-fbs [fbsBasePath] = "'images/'" [btnSelectText] = "'Browse'"></o2-upload-to-fbs>

Step:5 => Lastly in the firebase storage Rule replace the following code

service firebase.storage {
 match /b/your_project_name.appspot.com/o {
   match /images/{allPaths=**} {
   allow read, write;
  }
 }
}

Hope this will help you.

Thanks