I am looking for an example for image file upload over Firebase database using Angular2.
Please provide code sample or any link..
I'm not aware of any Angular2 libraries that can do Firebase Storage. The AngularFire2 library has a issue open on added the feature.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.